共计 1073 个字符，预计需要花费 3 分钟才能阅读完成。
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>
