css - 如何将 CSS 动画添加到网页上的元素？

Question

我想在我的页面上的标签上添加动画以“加速”页面的加载（分散用户的注意力）。我希望我的 h1 标签通过彩虹的颜色 (ROYGBIV) 变形。

使用 HTML 和 CSS 完成此任务的最简单方法是什么？

Answer 1

给你的 h1 标签一个类，比如“Rainbojangles”：

<h1 class="Rainbojangles">Award Winners Only</h1>

在您的 Site.css（或其他 CSS）文件中包含该类：

.Rainbojangles {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: rainbowGlow;
    animation-duration: 5s;
    animation-delay: 2s;
    -moz-animation: rainbowGlow 5s 1 linear;
    -o-animation: rainbowGlow  5s 1 linear;
    -webkit-animation: rainbowGlow 5s 1 linear;
    animation: rainbowGlow 5s 1 linear;
}

（课程规则的第一部分可以调整或删除）；规则的动画部分是绝对需要的）

将动画代码添加到 CSS 文件中：

@-webkit-keyframes rainbowGlow {
from {
         color: white;
     }
13% {
        color: red;
    }
25% {
        color: orange;
    }
38% {
        color: yellow;
    }
50% {
        color: green;
    }
63% {
        color: blue;
    }
75% {
        color: indigo;
    }
88% {
        color: violet;
    }
to {
       color: white;
   }
}

如您所见，我从白色开始并返回到白色，但在此之间循环通过彩虹的颜色，为每种色调赋予大致相等的“重量”。

但请注意，除了“@-webkit-keyframes rainbowGlow”之外，您还需要相同的 CSS：

@-moz-keyframes rainbowGlow 
@-o-keyframes rainbowGlow 
@keyframes rainbowGlow 

...支持尽可能多的浏览器。

要查看这个 CSS3 彩虹动画的实际效果，请访问http://www.awardwinnersonly.com/