正文 首页技术分享

纯CSS背景渐变效果

枫叶

纯CSS背景渐变效果,括号内的0deg是角度,后面跟着一个颜色和颜色开始的位置,后面跟着另一个颜色和颜色结束的位置。

007X8olVly1g7m1x0zco3j30xc0dbdfw.jpg

实例代码

<!DOCTYPE html><html><head><meta charset="utf-8"/><style>#wrap {
	background: -webkit-linear-gradient(45deg,#5a3694 0%, #13bdce 33%, #0094d9 66%, #6fc7b5 100%);
	background-size: 400%;
	background-position: 0% 100%;
	animation: gradient 7.5s ease-in-out infinite;
	width: 100%;
	max-width: 100%;
	min-height: 80vh;}@-webkit-keyframes gradient{50%{background-position:100% 0}}@keyframes gradient{50%{background-position:100% 0}}		</style></head><body><div id="wrap"></div></body></html>