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 将创建一个从左到右的渐变。

CSS写法:

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

发表评论