一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

css3制作背景渐变动画效果教程

时间:2022-10-26 编辑:坚强 来源:一聚教程网

本文为小伙伴们带来了关于css3制作背景渐变动画效果教程,感兴趣的小伙伴一起来看看吧。

实现效果

实现代码

html

Pure CSS Animated Gradient Background

with by Manuel Pinto

css3

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

以上就是关于css3制作背景渐变动画效果教程的全部内容了,感兴趣的小伙伴记得点击关注哦。

热门栏目