请老师检查下代码，谢谢

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            /*此处写代码*/
            text-align: center;
            bottom: 8%;
            animation: move 2s linear .5s infinite;
        }
        @keyframes move {
            0% {
                bottom:8%;
            }
            20% {
                bottom: 3%;
            }
            40% {
                bottom: 4%;
            }
            60% {
                bottom: 2%;
            }
            80% {
                bottom: 4%;
            }
            100% {
                bottom: 3%;
            }
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>

不厌_ 2021-05-28

源自：过渡与动画 2-18 编程练习

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-05-28 14:20:19

同学你好，动画实现效果不太流畅，建议优化一下，参考代码如下：

祝学习愉快！

收起回答

不厌_ 提问者 #1

老师，设置alternate 后箭头会从按照下落轨迹返回再掉落，作业里的动图效果箭头应该是每次直接回到初始点再掉落的。

2021-05-28 14:30:30
好帮手慕然然回复提问者不厌_ #2

同学你好，设置alternate是为了实现“顿一下”的效果，同学仔细看一下效果图，会有一个“顿”的过程，所以设置了alternate。祝学习愉快！

2021-05-28 15:30:06
不厌_ 提问者回复好帮手慕然然 #3

好的，谢谢老师

2021-05-28 15:42:06