1.裁剪图片
clip: rect(0px, 230px, 2px, 0px);
2.等待-4秒
animation-delay: -4s;
3.动画
.box::before, .box::after{
content: '';
border: 2px solid #2ecc71;
position: absolute;
margin: -15px;
animation: borderClip 8s linear infinite;
}
@keyframes borderClip {
0%, 100%{
clip: rect(0px, 230px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 230px, 0px);
}
50% {
clip: rect(228px, 230px, 230px, 0px);
}
75% {
clip: rect(0px, 230px, 230px, 228px);
}
}
4.transform 旋转
transform: translate(-50%, -50%); 2D