Question

我试图使用animate.css插件，这应该是一个简单的任务，但我无法让它工作。我哪里出错了？这是我的代码（尽可能简单）：

<html>
  <head>
    <link rel="stylesheet" href="css/animate.css">
    <style type="text/css">
      .demo{
        background-color:red;
        width:100px;
        height:100px;
        margin:300px;
      }
    </style>
  </head>
  <body>
    <div class="demo animated bounce"></div>
  </body>
</html>

我已经将animate.css和代码保存在桌面上。

Answer 1

根据您的代码，“animate.css”文件应该位于名为“css”的文件夹中，相对于.html文件所在的位置

因此，如果你的.html文件在桌面上，你有两个选择：

在桌面上创建一个名为“css”的文件夹，并将“animate.css”移动到该文件夹中，或者......
编辑代码以指向文件的正确位置：
```
<link rel="stylesheet" href="animate.css">
```

Answer 2

您的文件结构可能尚未排序。使用＆＃34; animate.css＆＃34;

的CDN版本

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

这是一个小提琴的链接。

＆＃13;

.demo{
background-color:red;
width:100px;
height:100px;
margin:100px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<body>
<div class="demo animated bounce"></div>
</body>

＆＃13;

希望这有帮助。

Animate.css插件不起作用

2 个答案: