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图片放背景了。


© 2020 www.f-learn.cn All Rights Reserved