Question

我有以下代码有问题（见下文）。

<!DOCTYPE html>
<head>
    <title>Duck</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel-"stylesheet" href="animate.css">
    <!-- Tab Title -->
</head>
<body>
    <div>
        <div id = "header">
            <img class = "duck animated zoomIn" src = "https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
        </div>
        <!-- Main Header -->    
    </div>
</body>

main.css文件显示在这里

        #header {
        padding:10px 0 0 0 ;
    }

    img.duck {
        margin-left: auto;
        margin-right: auto;
        display:block;
    }

    #page {
        margin: 0px auto;
    }

我正在使用daneden animate.css文件（https://daneden.github.io/animate.css/），该文件包含一个充满动画的CSS文件（https://raw.githubusercontent.com/daneden/animate.css/master/animate.css）。

现在，鸭子坐在页面的中间，但没有动画。它根本不起作用。

任何解决方案？谢谢，戴夫。

Answer 1

你在这里犯了错误

<link rel-"stylesheet" href="animate.min.css">

在rel之后应该是= sign

Answer 2

<link rel-"stylesheet" href="animate.css">

不正确。请添加：

<link rel="stylesheet" href="animate.css">

请在rel=之后用rel-替换。

Answer 3

应该有rel="stylesheet";

小提琴：https://jsfiddle.net/ypdahLtt/1/

请注意......第一次加载页面时，您将找不到任何动画，因为Image需要一点时间才能加载。加载动画时，动画结束了。但之后它会缓存图像，你会看到动画就好了。

对于这种情况使用：alt="The Duck"图像的属性...然后，对于第一次加载，您可以看到动画文本。

CSS动画问题与图像

3 个答案: