前端每日实战：52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

时间：2023-03-31 00:23:07 CSS

前端日常实战：52#视频演示如何用纯CSS制作一个球绕圈转的动画。https://codepen.io/comehop??e/pen/gKxyWo互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cg48mty源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含一个圆环和3个小球：

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:darkslategray;}Changeboxmodel:*{box-sizing:border-box;}画圆：.container{position:relative;font-size:20px;}.ring{position:relative;宽度：10em；高度：10em；边框：1.5em实心浅绿松石色；border-radius:50%;}在环的左上角画一个小球：.sphere{position:absolute;顶部：-20%；左：-20%；}.sphere::after{内容：''；位置：绝对；宽度：3em；背景色：浅海绿；border-radius:50%;}让小球悬停在圆的左上角：.sphere{width:80%;高度：80%；animation:rotate1.5slinearinfinite;}@keyframesrotate{to{transform:rotate(360deg);}}让小球上下旋转：.ring{z-index:2;}.??sphere{动画：旋转1.5s线性无限，重叠1.5s线性无限;}@keyframesoverlapping{to{z-index:2;}}通过设置动画延迟，制作3个小球同时悬停的效果：.sphere:nth-child(2){animation-delay:-0.5s;}.sphere:nth-child(3){animation-delay:-1s;}最后，让容器旋转以创建小球绕环的效果：.container{animation:rotate5slinearinfinite;}大功告成！