↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
代码描述:利用CSS操作进行对背景颜色的渐变,实现一些颜色的重复播放效果
/*
colorswitch(animation-name):选择器的 keyframe 名称;
20s(animation-duration):颜色变换的周期时间;
(animation-timing-function):动画的速度曲线;
(animation-delay):动画开始之前的延迟;
infinite(animation-iteration-count):播放动画的次数,可以是数值,也可以是infinite(无限次);
(animation-direction):是否应该轮流反向播放动画;
*/
.animat {
height:1000 px;
position:relative;
animation:colorswitch 20 s infinite;
/* Firefox */
-
moz - animation:colorswitch 20 s infinite;
/* Safari and Chrome */
-
webkit - animation:colorswitch 20 s infinite;
/* Opera */
-
o - animation:colorswitch 20 s infinite;
}
@keyframes colorswitch {
/*参照示例代码*/
}