HTML动态极光背景-未来学习 | 很棒的知识分享站

HTML动态极光背景

CSS3是一种新特性的语言，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。实现了不用javascript可定制炫酷的过渡动画。

漂亮的不像实力派
省去Javascript用CSS实现，提高了性能并且端时间进行创作。

渐变颜色的原理

一共四个颜色，从珊瑚橙开始渐变，可以十六进制或RGB值即可。

代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>极光</title>
<style>
.box {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height: 100%
}
.Change {
	animation: animation 10s ease infinite;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%
}
 @keyframes animation {
 0% {
 background-position:0 50%
}
 50% {
 background-position:100% 50%
}
 to {
 background-position:0 50%
}
}
</style>
</head>
<body>
 <div class="box  Change"></div>
</body>
</html>

代码很简单，其中animation属性是简写：

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

可以这样写：

animation-name:animation;  // 需要绑定到选择器的 keyframe 的名称
animation-duration：10s；  //规定完成动画所花费的时间
animation-timing-function: ease；  // 动画以低速开始，然后加快，在结束前变慢。
animation-iteration-count:infinite； //规定动画应该无限次播放

背景渐变

//语法
background: linear-gradient(angle, color-stop1, color-stop2);

度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

很漂亮！省去了PS图片放背景了。

推荐

导航

HTML动态极光背景