简易白云动画.zip

利用 CSS3中的转换、过渡和动画等知识实现的白云动画 1、整体分块,上面的是天空,下面的是草地 2、白云的布局 1)天空div里面构建五个子div,命名为云,每一个div控制大小、圆角和白色填充。 2)用子div的before和after伪元素转块元素,控制其大小、圆角、位置及其缩放等,填充白色,让其与云div一起组成云朵。 3)分别控制每一个云div,给予不同的缩放比例和位置,让其排列于天空不同位置。 3、白云动画的制作 1)定义云朵运动的动画关键帧。 2)给云朵元素绑定动画,分别对不同的云朵给予不同的动画运动周期。 3)白云透明度的设置 4、小兔子的制作