如何用纯 CSS 创作一个变色旋转动画

左手的ㄟ右手 2022-04-13 10:10 384阅读 0赞

![在这里插入图片描述][20181129005446846.gif]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/ejZWKL][https_codepen.io_comehope_pen_ejZWKL]

## 可交互视频 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cawq6cB][https_scrimba.com_p_pEgDAM_cawq6cB]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含 9 个元素：

居中显示：

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;
    }

大功告成！

原文地址：https://segmentfault.com/a/1190000015655171

[20181129005446846.gif]: /images/20220413/2e9ccabcb66d49988a12a5aaf96cbdf4.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F081-swapping-colors-rotating-animation&demotitle=%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E4%B8%80%E4%B8%AA%E5%8F%98%E8%89%B2%E6%97%8B%E8%BD%AC%E5%8A%A8%E7%94%BB
[https_codepen.io_comehope_pen_ejZWKL]: https://codepen.io/comehope/pen/ejZWKL
[https_scrimba.com_p_pEgDAM_cawq6cB]: https://scrimba.com/p/pEgDAM/cawq6cB
[Link 2]: https://www.jqhtml.com/20118.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges