前端日常实战：81#视频演示如何用纯CSS制作变色旋转动画
时间：2023-04-05 20:20:46
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/ejZWKL互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cawq6cB源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含9个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.container{width:30em;高度：30em；font-size:12px;}设置容器内线条的样式：.容器{颜色：石灰；}。容器跨度{位置：绝对；宽度：5em；高度：5em；边框样式：实心；边框宽度：1em1em00；边框颜色：currentColor透明；border-radius:50%;}在容器中居中线：.container{display:flex;对齐项目：居中；justify-content:center;}定义变量，使线条从中心逐渐向外延伸：.containerspan{--diameter:calc(5em+(var(--n)-1)*3em);宽度：var(--直径);高度：var(--diameter);}.containerspan:nth-child(1){--n:1;}.containerspan:nth-child(2){--n:2;}.containerspan:nth-child(3){--n:3;}.containerspan:nth-child(4){--n:4;}.containerspan:nth-child(5){--n:5;}.containerspan:nth-child(6){--n:6;}.containerspan:nth-child(7){--n:7;}.containerspan:nth-child(8){--n:8;}.containerspan:nth-child(9){--n:9;}动画要旋转的线：.containerspan{animation:rotatinglinearinfinite;动画持续时间：calc(5s/(9-var(--n)+1));}@keyframesrotating{to{transform:rotate(1turn);}}定义变色动画效果，色相圈转360度为100%，--percent变量指的是100%所在的位置：@keyframeschange-color{0%,100%{--百分比：0；}10%{--percent:10;}20%{--percent:20;}30%{--pe最近：30；}40%{--percent:40;}50%{--percent:50;}60%{--percent:60;}70%{--percent:70;}80%{--百分比：80；}90%{--percent:90;}}最后，将变色动画应用于容器：.container{--deg:calc(var(--percent)/100*360deg);颜色：hsl(var(--deg),100%,50%);动画：变色5s线性无限；}大功告成！
