如何利用CSS3代码实现动态渐变

郊果如下:

代码如下:

<style>
.gradient0 {
	background: linear-gradient(to right,#5ccdde,#fa3f30,#563b5f,#5dc13a,#2b403c,#28438f,#e9e596,#8d0288);
	background-size: 2000%;
	animation: gradientBackground 5s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient1 {
	background: linear-gradient(to right,#5ccdde,#eb0828,#456840,#27e52a,#aa5e31,#be77e1,#39693d,#6305bc);
	background-size: 1624%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient2 {
	background: linear-gradient(to right,#5ccdde,#c78dd7,#cfa58a,#9500f1,#d634b9,#2eec98,#4d2ea6,#f9857b);
	background-size: 1898%;
	animation: gradientBackground 8s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient3 {
	background: linear-gradient(to right,#5ccdde,#0ca282,#5039ea,#a97b90,#b6fdf8,#db4978,#f3bcb5,#6b0adf);
	background-size: 1915%;
	animation: gradientBackground 8s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient4 {
	background: linear-gradient(to right,#5ccdde,#5c2b1b,#b2464d,#9b20e3,#281c5a,#dabbff,#62ca9b,#dcbfb9);
	background-size: 1574%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient5 {
	background: linear-gradient(to right,#5ccdde,#6dce22,#04763e,#0dd58e,#fcd294,#06b8f4,#c0f78d,#c58451);
	background-size: 1624%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient6 {
	background: linear-gradient(to right,#5ccdde,#c61e1f,#9fddc4,#ce7290,#523618,#3d047e,#076c5d,#dd0016);
	background-size: 1933%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
@keyframes gradientBackground {
	0% {
		background-position: 0 0
	}
 
	50% {
		background-position: 50% 100%
	}
 
	100% {
		background-position: 100% 0
	}
}
</style>
 
<div class="gradient0" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient1" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient2" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient3" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient4" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient5" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient6" style="width:98%;height:4em;margin:auto;"></div>




如何利用CSS3代码实现动态渐变  技术教程 第1张

感谢您的支持,我会继续努力的!

如何利用CSS3代码实现动态渐变  技术教程 第2张
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

标签: 技术教程

作者头像
便宜技术博客创始人

乐享资源记忆点滴的博客,主要分享程序源码!

  • 我是一个热爱钻研计算机技术的青少年,从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队,希望能和大家合作,一同创造出属于我们自己的作品!
  • 版权声明:本站文章如无特别标注,均为本站原创文章,于2019-05-01,由便宜技术博客发表,共 4860个字。
  • 转载请注明出处:便宜技术博客,如有疑问,请联系我们
  • 本文地址:https://aswpay.cn/?id=6
上一篇:如何利用CSS3和JS实现点击波纹特效
下一篇:Emlog仿刀网下载样式代码

发表评论