css动画实例源码 |css颜色进制

以下是一段简单的CSS动画实例源码。它能够让一个“Hello World”文本在页面上跳动，并不断变换颜色。

.bounce{
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bounce{
from {transform: translateY(0);}
to {transform: translateY(-50px);}
}
.color-change{
animation-name: color-change;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes color-change{
0% {color: #FF0000;}
25% {color: #00FF00;}
50% {color: #0000FF;}
75% {color: #FFFF00;}
100% {color: #FF00FF;}
}

首先，大家定义了一个名为“bounce”的 CSS 类。它使用了“animation-name”属性指定了一个与之对应的“bounce”动画。

接着，在“@keyframes bounce”内，大家定义了动画如何呈现。大家使用了“from”和“to”指令，把“Hello World”文本从一开始直到被从屏幕顶部弹回去途中的所有变化都定义了出来。

大家同时还定义了另一个名为“color-change”的 CSS 类，它是用来改变“Hello World”文本的颜色的。同样地，在“@keyframes color-change”内大家对文本颜色做出了很多变化，从而达到不断变换颜色的效果。

最后，通过在“animation-duration”属性中定义动画持续时间，以及在“animation-iteration-count”中定义动画循环次数，大家就完成了这个简单的CSS动画实例。