哪里不对?显示不出来

来源:2-20 编程练习

慕仙2169824

2020-12-04 13:53:09

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

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

            right: 0;

            left: 0;

            width: 800px;

            height: 600px;

            margin: auto;

            text-align: center;

            border: 5px solid #000;

            border-radius: 50%;

            animation-name: r;

            animation-duration: 5s;

            animation-timing-function:linear;

            animation-delay:2s;

            animation-iteration-count:1;

            animation-direction:reverse;

       }

       

       @keyframe r{

           from{

               

               top: -1000px;

           }

           to{

               top: 100px;

               

           }

       }

   </style>

</head>

<body>

    <div>大家好,欢迎来到慕课网!</div>

</body>

</html>


写回答

1回答

好帮手慕张

2020-12-04

同学你好,问题回答如下:

1、代码中的keyframes是少写了一个s的,因此导致没有任何显示:

http://img.mukewang.com/climg/5fc9ffd4090bf63802110189.jpg

2、另外我们练习中的效果是不需要加animation-direction: reverse;的,所以可以去掉,如下:

http://img.mukewang.com/climg/5fc9ffee091cd64a03750225.jpg

祝学习愉快!

1

0 学习 · 15276 问题

查看课程