2-20 编程练习

首页课程实战体系课手记专栏慕课教程

2-20 编程练习

来源：2-20 编程练习

慕移动4506339

2022-10-23 20:23:58

老师，帮忙检查下，动画显示效果为什么不是直接从上面下来，而是跳到右边再往下？

我设置了forwards 属性，为什么最终结束状态没有停住？

另外还有哪些其他问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-4</title>
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: 60px;
            font-weight: bold;
            line-height: 600px;
            position: absolute;
            top: -1000px;
            left: 0;
            right:0;
            width: 800px;
            height: 600px;
            margin: auto;
            text-align: center;
            border: 5px solid #000;
            border-radius: 50%;
            animation:disp 3s ease 2s infinite forwards;
        }
       @keyframes disp{
           from{
            top: -1000px;
            left: 0;
            right:0;
           }
       
           to{
              top:50%;
              margin-top:-300px;
              left:50%;
              margin-left:-400px;
           }
       }
   </style>
</head>
<body>
    <div>大家好，欢迎来到慕课网！</div>
</body>
</html>

写回答

1回答