2-15 课上代码实现效果，有些的问题，请老师帮忙看一下，谢谢

来源：2-15 动画的定义和调用

呜蜩的呀

2022-08-01 16:03:40

问题描述：

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid #000;
            margin: 40px auto;
            /* 对动画进行调用 */
            animation: rotate360 2s linear 0s;
        }

        .no2 {
            /* 对动画进行调用3次 */
            animation: rotate360 2s linear 0s 3;
        }

        .no3 {
            /* 对动画进行调用，并且动画永远执行 */
            animation: rotate360 2s linear 0s infinite;
        }

        /* 这个效果好像不生效？alternate说是偶数次，有点不清楚这个怎么用 */
        .no4 {
            /* 对动画进行调用，并且动画结束后逆向执行 */
            animation: rotate360 2s linear 0s alternate;
        }
        .no5 {
            /* 对动画进行调用，并且动画停止在结束状态 */
            animation: rotate360 2s linear 0s forwards;
        }


        /* 定义动画
        动画的优势在于无需触碰就可以自动执行，更为灵活方便 */
        @keyframes rotate360 {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(125deg);
            }
        }

        /* 定义多帧动画，用百分数划分阶段 */
        /* 多帧动画的阶段划分有间隔要求吗？如果是不规律的，比如是0，35 67，89，100，这种的状态可以的吗？还是说必须是规律的变化状态？ */
        @keyframes changecolor {
            0% {
                background-color: darksalmon;
                border-radius: 0%;
            }
            20% {
                background-color: rgb(236, 172, 53);
            }
            40% {
                background-color: rgb(133, 247, 40);
            }
            60% {
                background-color: rgb(48, 218, 248);
            }
            80% {
                background-color: rgb(11, 32, 223);
            }
            100% {
                background-color: rgb(210, 32, 255);
                border-radius: 50%;
            }
        }

        .no6 {
            /* 调用动画 */
            animation: changecolor 3s linear 0s;
        }

        .no7 {
            /* 调用动画，并且永不停止 */
            animation: changecolor 3s linear 0s infinite;
        }

        .no8 {
            /* 调用动画，停止在最后的状态 */
            animation: changecolor 3s linear 0s forwards;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box no2"></div>
    <div class="box no3"></div>
    <div class="box no4"></div>
    <div class="box no5"></div>
    <div class="box no6"></div>
    <div class="box no7"></div>
    <div class="box no8"></div>
</body>

</html>

写回答

1回答