transition: property duration timing-function delay;
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,
在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
页面仅需:
<div class="div1"></div>
接下来就是重点啦:css3来了
.div1{position: relative;width:100px;height:100px;}
.div1:before,.div1:after{content:"";display:block;width: 0;height:0;border:2px solid transparent;box-sizing: border-box;position: absolute;}
.div1:before{top:0;left:0;transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;}
.div1:after{right:0;bottom:0;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in ;}
.div1:hover:before{width:100%;height:100%;transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s;border-top-color:#ff5b00;border-right-color:#ff5b00;}
.div1:hover:after{width:100%;height:100%;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s;border-bottom-color:#ff5b00;border-left-color:#ff5b00;}
第一行不解释了;
第二行:给伪元素before、after一个块属性,并设border透明。
第三行:给伪元素before一个左上的定位;并设border颜色的变化时间为0,从0.8s开始变色(其实就是0.8s是,border变色了,变成透明);宽度从0.6s开始,执行0.2s,由100%变为0;高度从0.4s开始;执行0.2s;由100%变为0;这里的效果其实是鼠标离开时的效果,也就是边框线消失的动画过程
第四行:同第三行;
第五行:这里是鼠标划上时的效果过程啦!!!
首先设宽高为100%;然后边框颜色(这里选择top、right两条边),
最重要的就是通过transition来设置动画过程啦,
width 0.2s ease-in ,
这里就是宽度从0s开始,由0到100%;然后高从0.2s开始由0到100%;
下面同理;一个漂亮的边框动画效果就出来啦!
没图,这么说都没用,来!看图
不会p图,手动捂脸