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/

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

1 个答案: