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),函数进行旋转