这篇文章给大家介绍的内容是关于如何使用css实现变色旋转动画的动态效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
代码解读定义 dom，容器中包含 9 个元素：
<div class="container">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></div>
居中显示：
body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: black;}
定义容器尺寸：
.container {    width: 30em;    height: 30em;    font-size: 12px;}
设置容器中线条的样式：
.container {    color: lime;}.container span {    position: absolute;    width: 5em;    height: 5em;    border-style: solid;    border-width: 1em 1em 0 0;    border-color: currentcolor transparent;    border-radius: 50%;}
让线条在容器中居中显示：
.container {    display: flex;    align-items: center;    justify-content: center;}
定义变量，使线条从中心向外侧逐渐延伸：
.container span {    --diameter: calc(5em + (var(--n) - 1) * 3em);    width: var(--diameter);    height: var(--diameter);}.container span:nth-child(1) {    --n: 1;}.container span:nth-child(2) {    --n: 2;}.container span:nth-child(3) {    --n: 3;}.container span:nth-child(4) {    --n: 4;}.container span:nth-child(5) {    --n: 5;}.container span:nth-child(6) {    --n: 6;}.container span:nth-child(7) {    --n: 7;}.container span:nth-child(8) {    --n: 8;}.container span:nth-child(9) {    --n: 9;}
设置让线条旋转的动画效果：
.container span {    animation: rotating linear infinite;    animation-duration: calc(5s / (9 - var(--n) + 1));}@keyframes rotating {    to {        transform: rotate(1turn);    }}
定义改变颜色的动画效果，以色相环一周 360 度为 100%，--percent 变量是指位于这个 100% 的哪个位置：
@keyframes change-color {    0%, 100% {        --percent: 0;    }    10% {        --percent: 10;    }    20% {        --percent: 20;    }    30% {        --percent: 30;    }    40% {        --percent: 40;    }    50% {        --percent: 50;    }    60% {        --percent: 60;    }    70% {        --percent: 70;    }    80% {        --percent: 80;    }    90% {        --percent: 90;    }}
最后，把改变颜色的动画效果应用到容器上：
.container {    --deg: calc(var(--percent) / 100 * 360deg);    color: hsl(var(--deg), 100%, 50%);    animation: change-color 5s linear infinite;}
大功告成！
相关文章推荐：
如何用css和d3实现宇宙飞船的动态效果
如何使用css和d3实现无尽六边形空间的效果
以上就是如何使用css实现变色旋转动画的动态效果的详细内容。