Chris_威
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
padding: 20px;
position: relative;
height: 250px;
}
.main{
height: 200px;
width: 200px;
margin: 25px auto;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.main , .main::before, .main::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.main::before, .main::after {
content: '';
margin: -5%;
box-shadow: inset 0 0 0 2px rgba(105, 202, 98, 0.5);
animation: clip 8s linear infinite;
}
.main::before {
animation-delay: 0s;
}
@keyframes clip {
0%, 100% {
clip: rect(0px, 220.0px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220.0px, 0px);
}
50% {
clip: rect(218.0px, 220.0px, 220.0px, 0px);
}
75% {
clip: rect(0px, 220.0px, 220.0px, 218.0px);
}
}
</style>
<body>
<div class="wrapper">
<div class="main"></div>
</div>
</body>
</html>有个类似的，你参考参考