css 纯CSS3渐变背景动画

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 纯CSS3渐变背景动画相关的知识，希望对你有一定的参考价值。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300" type="text/css" />


<h1>Pure CSS3 Animated Gradient Background</h1>

Pure CSS3 Gradient Background Animation
---------------------------------------


A [Pen](https://codepen.io/P1N2O/pen/pyBNzX) by [Manuel Pinto](https://codepen.io/P1N2O) on [CodePen](https://codepen.io).

[License](https://codepen.io/P1N2O/pen/pyBNzX/license).

// Pure CSS - No JS

body {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

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

h1,
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}

以上是关于css 纯CSS3渐变背景动画的主要内容，如果未能解决你的问题，请参考以下文章

纯 CSS3 模拟 iPhone 背景切换动画

请问一下CSS3样式中如何让背景渐变与背景图片共存啊！