请老师检查,谢谢!

请老师检查,谢谢!

<!DOCTYPE html>
<html lang="en">
<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;
            animation-delay: 1s;
       }
       @keyframes disp{
        form{ top: -1000px; }
        to{   top: 80px;}

       }
   </style>
</head>
<body>
    <div>大家好,欢迎来到慕课网!</div>
</body>
</html>

老师,我想问问怎么实现让完成后可以固定在那里。

正在回答

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

1回答

同学你好,效果正确。让动画保持在最后一帧的话,可以使用:animation-fill-mode 属性,属性规定动画在播放之前或之后,其动画效果是否可见。

forwards    当动画完成后,保持最后一个属性值    

http://img1.sycdn.imooc.com//climg/5e575518093fb05103980404.jpg

如果我的回答帮到了你,欢迎采纳,祝好学习愉快~

  • 努力的刘同学 提问者 #1
    谢谢老师的解答,辛苦了!
    2020-02-27 15:17:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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