【学习任务】自学Animate.css动画库的使用
我要参与
【学习任务】自学Animate.css动画库的使用
学习任务 3.5k
等38人参与
来源: 第4周 / 前端工程师

实际开发中,并不是所有效果都要我们自己写,有的时候,要善用、会用别人造好的“轮子”。如果想使用这些“轮子”,就要会读它们的官方文档,因此读官网的能力很重要。Animate.css就是这些“轮子”中的一个,它是一个css动画库。接下来,让我们读一下它的官方文档,按照官网的说明,实现如下效果吧!

效果图:
图片描述

去发布

登录后即可发布作业,立即

我的作业

全部作业 202

城诗
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 20px auto;
            animation: animate__backInLeft 2s linear 0s infinite;
        }
    </style>
</head>

<body>

    <div class="animate__backInLeft"></div>


</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
代码块
复制 预览
复制成功!
提交于  2024-03-12 18:52:13
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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