素材牛VIP会员

颜色渐变替换动画效果

 浏览:699次-  评论:1次-  发布时间:2018-12-06
    Html
    Css
    Js
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
素材牛VIP永久特权
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
代码描述:利用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 {
	/*参照示例代码*/
}

讨论这个常用代码(1)回答他人问题或分享心得会奖励牛币

古***场
2019年07月05日
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数:699
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)