1、css实现边框动画
效果如图:
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