transition结合:after,:before实现动画
2018-02-11 16:25 改吧 阅读(2178) 评论(0) 编辑 收藏 举报
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%的一个过渡的效果
恩恩 欢迎补充的哦