分两种说明吧,CSS3的相对简单作为基础版,而Jquery的作为进阶版,当然进阶版的效果要更好一点。具体样式看首页的“展开网页”按钮。先说基础版吧。

基础版

也是从网上进行学习后的成果,学习代码来自:

https://github.com/code-fx/Pure-CSS3-Animated-Border

这里涉及一个CSS的基础知识,即当表层div的position为relative,里层div的position为absolute时,里层div和表层div是重复叠加在一起的。而当我们把里层div或者span的位置css(包括top,bottom,left,right)都设置成0时,里层和表层完全重叠。不仅如此,里层div可以是多个,只要position都设置为absolute就全部和表层重叠。

这时我们会发现一个情况,就是里层的div或者span其实可以用伪类来替换,这样代码更简单。

.div{
  position: relative;
}
.div:before, .div:after{
  content: '';
  position: absolute;
}

这样之后我们可以单独设置伪类的边框border和位置,再利用transition或者animation来使其运动。比如:

.div:before {
    border-top: 2px solid #00ff00;
    transition-property: all;
    transition-timing-function: linear;
    transition-duration: 2s;
    transition-delay: 0s;
    animation: border_top 2s infinite linear;
}

@keyframes border_top {
    0%{
        top: 0px;
        bottom: 0px;
        left: 0;
        right: 178px;
    }
    100%{
        top: 0px;
        bottom: 0px;
        left: 178px;
        right: 0;
    }
}

这样就可以利用div的before伪类,创建并移动了上边框border-top。animation的infinite属性是循环动画,你可以更改为其他需要的样式,比如加个:hover来达到鼠标覆盖动画的效果等等。当然我们很容易发现一个伪类只能创建一面边框,这个取决于你需要的样式,我这里需要四面边框都有各自的运动动画。所以很自然可以想到,利用after伪类再创建一面边框。可还剩下两面边框呢?很简单,在div里面套一层span或div即可,这样里层的span或者div又可以在多两个伪类。这样操作后,一个div的四面边框就都有了。做完之后,经过调整,主要是animation时间上的调整,就可以得到下面这种效果

CSS3边框

进阶版

基础版是相对简单的操作,极少代码编写就可以实现。但是这样的效果可能是你无法满意的,我们需要更加炫酷的效果,比如边框的渐变效果。那么这里就又出了问题,正如和background-image一样,如果使用border-image的话,animation是同样不会生效的,反正我这里是无法使用。所以需要和我以前的一篇文正提到的方法一样,利用jQuery来达成效果。但是立刻你会发现问题,jQuery无法选择伪类。因为伪类不是DOM元素,所以无法抓取。所以这里排除伪类的编写方式,直接写层进去即可。

<div>
    <span class="border_top"></span>
    <span class="border_right"></span>
    <span class="ui-border-element">
        <a>展开网页</a>
    </span>
    <span class="border_left"></span>
    <span class="border_bottom"></span>
</div>

和上面的操作一样,表层position是relative,里层span的position为absolute。然后给里层span加上CSS3的border-image样式,我这里很简单的使用了linear-gradient的渐变效果。接下来利用jQuery的animate()方法改变其位置即可。这里我贴出本站目前使用的function作为举例,具体样式情况各位需要根据自己的需求进行编写。同时也贴出加了渐变特效后的边框动画作为对比。

jquery边框
function border_loop() {
	$('.border_top').animate({
		right:"0px",
		left:'50px'
	}, 2000, 'linear', function () {
		$('.border_right').animate({
			top:'100%',
			bottom:'-40px'
		},2000,'linear',function () {
			$('.border_right').css({
				top: '-40px',
				bottom: '100%'
			});
		});
		$('.border_top').animate({
			right:"-100px",
			left:'100%'
		},500,'linear',function () {
			$('.border_top').css({
				right: '100%',
				left: '-100px'
			});
		});
	});

	$('.border_bottom').animate({
		right:"50px",
		left:'0px'
	}, 2000, 'linear', function () {
		$('.border_left').animate({
			top:'-40px',
			bottom:'100%'
		},2000,'linear',function () {
			$('.border_left').css({
				top: '100%',
				bottom: '-40px'
			});
		});
		$('.border_bottom').animate({
			right:"100%",
			left:'-100px'
		},500,'linear',function () {
			$('.border_bottom').css({
				right: '-100px',
				left: '100%'
			});
		});
	});
}

直接用setInterval()方法调用循环播放即可,循环的时间根据自己的情况慢慢调,说实话我非常不喜欢setInterval这个方法,用起来很不靠谱。实际上如用户切换网页的话,这个动画会出现问题。不过这个不是现在可以解决的问题了,以后再说。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

左半红印发表于2021.04.4th