请问为什么不能实现,是哪里错了?

请问为什么不能实现,是哪里错了?

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

            animation-duration: 1s;

         

       }

       @keyframes disp{

           from{transform:translateY(0 );}

           to  {transform:translateY(300px);}

       }

   </style>

</head>

<body>

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

</body>

</html>

请问为什么不能实现,是哪里错了?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

 @keyframes disp{

           from{transform:translateY(0 );}

           to  {transform:translateY(900px);}

       }

把to里面的Y轴的值改的大一些,就有效果了!

祝学习愉快!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师