麻烦老师帮忙看一下,没有实现动画,不知道问题出在哪,谢谢

来源:2-23 项目作业

叫我丽红

2021-04-26 14:39:50

<!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://github.com/animate-css/animate.css/releases/tag/v4.1.1/animate.compat.css">

    <style>

        div{

            width300px;

            height300px;

            margin0 auto;

            background-colorred;

        }

    </style>

</head>

<body>

   <div class="animated bounceInLeft"></div>

</body>

</html>


写回答

1回答

好帮手慕然然

2021-04-26

同学你好,老师在本地测试了一下,没有实现动画可能是由于网络原因,animate动画的css线上资源加载不成功,如图:

http://img.mukewang.com/climg/60866dbf09cfe38b08890055.jpg

建议同学将资源下载到本地,然后再尝试一下,下载步骤如下:

第一步:打开Animate.css动画库官网(点击可打开)

第二步:在官网首页的顶部右侧,点击“下载”菜单,如图

http://img.mukewang.com/climg/6077e2b909a32f7f14220578.jpg

第三步:点击“下载”菜单后会打开一个新页面,在打开的新页面中,会有Animate.css动画库的各种版本,选择合适的版本下载即可,如图

http://img.mukewang.com/climg/6077e2d2092fa6f912380942.jpg

第四步:将下载后的压缩包进行解压,解压后打开文件夹就可看到css源文件,如图

http://img.mukewang.com/climg/6077e2e009c5748407110456.jpg

祝学习愉快!


0

0 学习 · 15276 问题

查看课程