代码之家 › 专栏 › 技术社区 › CookieM

使有生气css不工作不知道为什么?

animate.css css html

CookieM · 技术社区 · 9 年前

我是HTML和CSS的新手,想让我的试用网站充满活力。虽然当我添加动画时。css到我的文件,它把它搞砸了,没有动画,把我的图片和背景搞砸了。

这是我的代码:

h2 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 282px;
  text-transform: uppercase;
  font-size: 45px;
  animation-name: animation1;
  animation-duration: 2;
}
h1 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 250px;
  text-transform: uppercase;
  font-size: 55px;
}
img {
  position: relative;
  bottom: 0px;
  left: 425px;
}
body {
  background-image: url(cool%20gradient.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
a {
  color: hotpink;
  text-transform: uppercase;
  font-size: 30px;
  position: relative;
  left: 165px;
  bottom: -50px;
}

<h2 class="animated bounceInRight">Want to see a Pug</h2> 
<h1 class="animated bounceInLeft">Licking a Screen</h1>
<img class="animated fadeInDown" src="Down-Arrow1.png" style="width:200px;height:200px;">
<a class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>

感谢所有的帮助!

2 回复 | 直到 9 年前

RBT 3 年前

如果您的代码正常但看不到动画效果,此问题用于设置Windows的性能选项

您应该从CSS文件(animate.CSS)中删除此代码,然后使用键 Ctrl键 + 第5页 要清除浏览器缓存,请参阅刷新的网页

@media (print), (prefers-reduced-motion: reduce) {
.animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
}}

zx485 potemkin 9 年前

这个 <style> 标记属于 <head> 部分还要确保 animate.min.css 文件存在,并且该文件的路径正确。

<!DOCTYPE html>
<html>

  <head>
    <style>
    h2 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 282px;
        text-transform: uppercase;
        font-size: 45px;
        animation-name: animation1;
        animation-duration: 2;
        }

    h1 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 250px;
        text-transform: uppercase;
        font-size: 55px;
       }

    img {
        position: relative;
        bottom: 0px;
        left: 425px;   
        }

    body {
        background-image: url(cool%20gradient.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        }   

    a {
        color: hotpink;
        text-transform: uppercase;
        font-size: 30px;
        position: relative;
        left: 165px;
        bottom: -50px;
      }   

    </style>
    <link rel="stylesheet" href="animate.min.css">     
  </head>  

  <body>
   <h2 class="animated bounceInRight">Want to see a Pug</h2> 
   <h1 class="animated bounceInLeft">Licking a Screen</h1>
   <img class="animated fadeInDown" src="Down-Arrow1.png"      style="width:200px;height:200px;">
   <a  class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>   
  </body>
</html>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前