图像的 CSS 动画问题

我有以下代码有问题(见下文(。

<!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>

主文件.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(。

现在，鸭子位于页面中间，但不具有动画效果。它根本不起作用。

有什么解决办法吗？谢谢戴夫。

你在这里犯了一个错误

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

它应该是 = rel 之后的符号

应该有rel="stylesheet" ;

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

请注意...第一次加载页面时，您不会找到任何动画，因为图像需要一点时间来加载。当它加载时，动画已经结束。但之后它将缓存图像，您将看到动画。

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

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

不正确。请补充：

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

请在rel-后替换为rel=。

相关内容

最新更新

热门标签：