用CSS做出写轮眼变化图

成品如下

在抖音上刷到过一次写轮眼的变化视频，想试试CSS里的动画是否也能做出这种效果。 我想到的做法是，将所有的写轮眼图片叠加放到一起。然后通过动画，将最上面的眼睛旋转并消失，第二只眼睛就显示出来了。

然后就是如何让眼睛之间的旋转消失衔接的更自然。我想到的是通过改变眼睛在动画不同时间点的状态，让前后的眼睛自然的衔接上。

10只眼睛，我一共设置了一个20秒的动画，每一只眼睛分配的时长是2秒钟。

接下来就是给每一只眼睛的动画进行时间节点的调整，每一段代码都差不多。代码如下

 <style>
        .a1{
            position: relative;
            width: 600px;
            height: 300px;
            margin: 200px auto;
            background: url(../../../娱乐/做的玩/图片/佐助.jpg);
            transform: scale(1.4);
        }
        .box{
            position: absolute;
            left: 235px;
            top: 95px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            overflow: hidden;
        }
        li{
            position: absolute;
            left: 0;   
            top: 0;
            width: 100%;
            height: 100%;
        }
        li img{
            width: 100%;
            height: 100%;
        }
        li:nth-child(1){ animation: move10 20s backwards infinite ;}
        li:nth-child(2){ animation: move9 20s backwards infinite ; }
        li:nth-child(3){ animation: move8 20s backwards infinite ; }
        li:nth-child(4){ animation: move7 20s  backwards infinite ;}
        li:nth-child(5){ animation: move6 20s  backwards infinite ;}
        li:nth-child(6){ animation: move5 20s  backwards infinite ; }
        li:nth-child(7){ animation: move4 20s  backwards infinite ; }
        li:nth-child(8){ animation: move3 20s  backwards infinite ;}
        li:nth-child(9){animation: move2 20s  backwards infinite; }
        li:nth-child(10){ animation: move 20s backwards infinite ; }
        @keyframes move{
            0%{
                opacity: 1;
            }
            5%{
                transform: rotate(0deg);
                opacity: 1;
            }
            8%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move2{
            15%{
                transform: rotate(0deg);
                opacity: 1;
            }
            18%{
                
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move3{
            25%{
                transform: rotate(0deg);
                opacity: 1;
            }
            28%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move4{
            35%{
                transform: rotate(0deg);
                opacity: 1;
            }
            38%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move5{
            45%{
                transform: rotate(0deg);
                opacity: 1;
            }
            48%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move6{
            55%{
                transform: rotate(0deg);
                opacity: 1;
            }
            58%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move7{
            65%{
                transform: rotate(0deg);
                opacity: 1;
            }
            68%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move8{
            75%{
                transform: rotate(0deg);
                opacity: 1;
            }
            78%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move9{
            85%{
                transform: rotate(0deg);
                opacity: 1;
            }
            88%{
                transform: rotate(360deg);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes move10{
            95%{
                transform: rotate(0deg);
                opacity: 1;
            }
            100%{
                transform: rotate(360deg);
                opacity: 1;
            }
        }
    </style>

<body>
    <div class="a1">
    <div class="box">
        <ul>
            <li><img src="./写轮眼05.jpg" alt=""></li>
            <li><img src="./写轮眼09.jpg" alt=""></li>
            <li><img src="./写轮眼08.jpg" alt=""></li>
            <li><img src="./写轮眼07.jpg" alt=""></li>
            <li><img src="./写轮眼06.jpg" alt=""></li>
            <li><img src="./写轮眼05.jpg" alt=""></li>
            <li><img src="./写轮眼04.jpg" alt=""></li>
            <li><img src="./写轮眼03.jpg" alt=""></li>
            <li><img src="./写轮眼02.jpg" alt=""></li>
            <li><img src="./写轮眼01.jpg" alt=""></li>
        </ul>
    </div>
    </div>
    </body>