.box {
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.point {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #000;
}
@keyframes rotate1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.line {
position: absolute;
margin-left: -4px;
left: 50%;
bottom: 50%;
width: 8px;
height: 160px;
background-color: #000;
animation: rotate1 60s linear infinite;
transform-origin: 50% 100%;
}
<div class="box">
<div class="point"></div>
<div class="line"></div>
</div>
网友评论