css实现边框动画
1、css实现边框动画
效果如图：
<style>
body,div{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 300px;
height: 200px;
padding: 20px;
margin: 50px auto;
color: #fff;
background-color: #f60;
}
.border-box{
position: relative;
width: 100%;
height: 100%;
padding: 20px;
}
.border-box::before,
.border-box::after{
position: absolute;
content: ' ';
width: 0;
height: 0;
border: 1px solid transparent;
box-sizing: border-box;
}
.border-box::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;
}
.border-box::after{
bottom: 0;
right: 0;
transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
.border-box:hover:before,
.border-box:hover:after{
width: 100%;
height: 100%;
}
.border-box:hover::after{
border-bottom-color: #fff;
border-left-color: #fff;
transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.border-box:hover::before{
border-top-color: #fff;
border-right-color: #fff;
transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}
</style>
<body>
<div class="box">
<div class="border-box">hover查看效果</div>
</div>
</body> 相关推荐
myloveqiqi 2020-08-09
猫沙盆 2020-07-08
猫沙盆 2020-07-07
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
jiedinghui 2020-02-20
MaureenChen 2020-02-17
zengni 2019-12-03
云端漂移 2020-07-05
SuiKaSan的自学室 2020-06-13
jiedinghui 2020-05-14
wcssdu 2020-05-11
somboy 2020-04-19
zengni 2020-04-16
somboy 2020-02-23