main {
width:100%;
height:529px;
display:flex;
flex-direction:column;
align-items:center;
}
.path {
width:300px;
height:300px;
border-radius:50%;
margin:100px auto;
position:relative;
display:flex;
border:1px solid #456eff;
}
.logo {
width:52px;
margin:auto;
background:#FFF;
}
.avatar {
width:50px;
position:absolute;
top:124px;
left:124px;
animation:circular-smooth-spin 7.5s infinite linear;
animation-play-state:running;
}
.avatar > img {
width:inherit;
border-radius:50%;
overflow:hidden;
}
.path:hover .avatar {
animation-play-state:paused;
}
.avatar:nth-of-type(2) {
animation-delay:-1.5s;
}
.avatar:nth-of-type(3) {
animation-delay:-3s;
}
.avatar:nth-of-type(4) {
animation-delay:-4.5s;
}
.avatar:nth-of-type(5) {
animation-delay:-6s;
}
@keyframes circular-smooth-spin {
from {
transform:rotate(0turn) translateY(-154px) rotate(1turn)
}
to {
transform:rotate(1turn) translateY(-154px) rotate(0turn)
}
}更新时间:2023-12-12 23:34:28
此效果巧妙利用rotate(0turn) > rotate(1turn),函数进行旋转