小伙伴们，我们学习了 CSS3中的转换、过渡和动画等知识，那么现在我们来运用所学的知识绘制一幅美丽的蓝天白云绿草，小兔嬉耍的美景吧！

效果图如下（小白兔的图片从素材里面下载）：

1、整体分块：

1）构建两个div元素，一个是蓝天，一个是草地，要求全屏显示，蓝天高度：草地高度=6:4。

2）第一个div命名为天空，并填充天空渐变色；第二个div命名为草地，并填充草地渐变色。

     天空的颜色为 rgb(196, 228, 253)；

     草地的颜色为 rgb(148, 190, 89)

2、白云的布局

1）天空div里面构建五个子div，命名为云，每一个div控制大小、圆角和白色填充。

2）用子div的before和after伪元素转块元素，控制其大小、圆角、位置及其缩放等，填充白色，让其与云div一起组成云朵。

3）分别控制每一个云div，给予不同的缩放比例和位置，让其排列于天空不同位置。

     白云的颜色为 #FFFFFF，并且有不同的透明度。

3、白云动画的制作

1）定义云朵运动的动画关键帧。

2）给云朵元素绑定动画，分别对不同的云朵给予不同的动画运动周期。

3）白云透明度的设置

4、小兔子的制作

 在草地div中插入小兔子图片。

提示：小兔子可以用绝对定位属性，放到距离底部50像素，距离右边200像素的位置。

规范【10分】   
    * 文件、id、class命名规范。

    * HTML和CSS代码规范及添加适量注释。  

    * 使用外部css样式，css样式文件放在css文件夹下。

整体要求【10分】

    *画面内容要求全屏显示并且蓝天和草地的高度比例为蓝天：草地=6:4

蓝天【20分】    

    * 蓝天颜色与渐变    

草地【20分】

    * 草地的颜色与渐变    

白云【30分】

    * 白云的动画以及形状的设置以及透明度   

小白兔【10分】     

    *小兔子的位置摆放正确