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