背景
- 第一次看见这个效果感觉真的很惊艳,要来代码研究发现就是3图片移动而已。
- 其中他们把3朵云translate3d,我感觉其实没必要。我自己写的跟他们效果一样的。
主要收获
- 切图真的是太重要了,图切的好,看起来效果就牛b,特别是png这种透明图。
- 还有收获就是复习了下animation几个属性:标识符,动画持续时间,时间方程效果,延迟时间,次数,方向,位置。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sky">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>
<style>
body{
padding: 0;
margin: 0;
}
.sky{
height: 500px;
width:100%;
position: relative;
animation: sky_background 50s ease-out 0s infinite normal none;
overflow: hidden;
}
.cloud_one{
background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_one.png') repeat-x;
position: absolute;
height: 100%;
width:300%;
left: 0;
top:0;
animation: cloudOne 50s linear 0s infinite normal none;
}
.cloud_two{
background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_two.png');
position: absolute;
height: 100%;
width:300%;
left: 0;
top:0;
animation: cloudTwo 50s linear 0s infinite normal none;
}
.cloud_three{
background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_three.png');
position: absolute;
height: 100%;
width:300%;
left: 0;
top:0;
animation: cloudThree 50s linear 0s infinite normal none;
}
@keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@keyframes cloudOne {
0%{
transform: translateX(0);
}
100%{
transform: translateX(-20%);;
}
}
@keyframes cloudTwo {
0%{
transform: translateX(0);
}
100%{
transform: translateX(-40%);;
}
}
@keyframes cloudThree {
0%{
transform: translateX(0);
}
100%{
transform: translateX(-60%);;
}
}
</style>
</body>
</html>