今天听讲了万晨曦老师的公开课,将所学的东西做一个总结。
首先,我们做一个蓝天白云和土地的背景。
body{
background: #5ca0e3; //蓝天
}
.ground{ //土地
width: 100%;
height: 30%;
background: #ca794c;
position: absolute;
left: 0;
bottom: 0;
}
其css样式结果如图所示:
接下来我们用css来做云朵:
.cloud{
width: 18vmin; /*根据宽度或高度那个小然后改变*/
height: 5vmin;
background: #fff;
border-radius: 15vmin;
position: absolute;
left: 22vmin;
top: 12vmin;
animation: cl0 12s infinite linear;
}
.cloud1{
width: 9vmin;
height: 9vmin;
background: #fff;
position: absolute;
border-radius: 7vmin;
left: 1vmin;
top: -4vmin;
}
.cloud2{
width: 11vmin;
height: 11vmin;
background: #fff;
position: absolute;
border-radius: 7vmin;
left: 5vmin;
top: -7vmin;
}
这三部分定义了组成云朵的三部分形态。
为了让他们组成一个云朵,用了以下html代码:
<div class="cloud">
<div class="cloud1"></div>
<div class="cloud2"></div>
</div>
其效果图:
如何让云朵飘起来?
@keyframes cl0 {
0%{transform: translateX(-100vmin) }
100%{transform: translateX(100vmin) }
}
animation: cl0 12s infinite linear;这句代码让云朵以匀速缓慢的移动起来,而上面代码则是云朵移动的范围。最终云朵就会在蓝天里飘起来了。
在本次代码学习中,特别学习到了vmin这个单位。它不是绝对单位,它是可以根据可视窗口大小而调整的。