动起来的效果点击 这里
show me the code
html
<div class="circle">
<div class='small-circle'></div>
</div>
css
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: #296BEF;
position:relative;
}
.small-circle {
position:absolute;
width: 100px;
height: 1px;
top: 100px;
left: 100px;
animation: ani 5s infinite linear;
transform-origin: left;
&::after {
content: '';
position:absolute;
right: -15px;
top: -15px;
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
}
}
@keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}```