纯CSS背景渐变效果

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

渐变效果

实例代码

<!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>

2 条回复A管理员Y会员M游客