transition结合:after,:before实现动画

div代码

<div class='div'>
hover
</div>

css代码

.div{
width:200px;
height:100px;
line-height: 100px;
text-align: center;
border-radius: 5px;
background-color: #FEC171;
transition: all 600ms ease;
position: relative;
}

.div:hover{
background-color: #fff;
border-radius: 0;
}
.div:hover:before,.div:hover:after{
width:100%;
transition: all 600ms ease;
background-color: #FEC171;
}
.div:before,.div:after{
position: absolute;
content:'';
top:0;
right:0;
height:2px;
width:0;
transition: all 400ms ease
}
.div:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}

思路

实现的是一个divhover上去改变背景色，但是显示很单调，而且没有动画的效果

然后这个代码是结合了伪类before跟after来实现before一条线，after一条线

before这条线从右边出来

after这条线从左边出来的这样一个有动画效果的感觉

实现的思路就是用transition的过渡来实现的，当然上面的代码没有做兼容

before跟after的那条线都可以给一个绝对定位然后看起来跟div的border一样的效果

before是用绝对定位在top:0,right:0那里,就是从right:0,width:0到width:100%的一个过渡的效果

after是用绝对定位在top:inherit,right:inherit,bottom:0,left:0那里就是从left：0，width:0到width:100%的一个过渡的效果

恩恩欢迎补充的哦

巴特西

transition结合:after,:before实现动画

最新文章

热门文章