the html code is as follows:
<div class="circle2">
<span class="wave"></span>
</div>the css code is as follows:
.circle2 {
width: 162px;
height: 162px;
border-radius: 50%;
position: relative;
top: 18px;
left: 50%;
overflow: hidden;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0px 2px 5px 2px -sharp269e89 inset;
z-index: 1;
}
.wave {
width: 262px;
height: 262px;
position: absolute;
background: linear-gradient(-sharp2aa192, -sharp2ea790);
background: -webkit-linear-gradient(-sharp2aa192, -sharp2ea790);
top: -140px;
left: -100px;
filter: opacity(0.5);
border-radius: 43%;
animation: drift linear infinite;
transform-origin: 50% 48%;
overflow: hidden;
}
@keyframes drift {
from {
transform: rotate(360deg);
}
}
@-webkit-keyframes drift {
from {
transform: rotate(360deg);
}
}
.wave:nth-of-type(1) {
animation-duration: 10s;
-webkit-animation-direction: alternate;
}
under normal circumstances, the figure is as follows:
:
:
I found that this line of code animation: drift linear infinite; caused it to look normal as soon as it was deleted, and it couldn"t be cut into a circle.
several methods have been tried on the Internet, but to no avail. I would like to ask all kinds of gods for answers here