纯CSS3白云飘动动画效果

一款纯CSS3白云飘动动画效果，有多种白云的形状，通过不同的移动速度在页面指定位置进行飘浮移动，可以自由设置白云的形状和移动速度，适合做成动态的登录或注册的表单背景，喜欢的童鞋请收下吧。

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，仅需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，多个白云放入不同的div容器里，并设置好位置，代码如下：

<div class="main_window">
	<div class="cloud" data-type="white_4" style="top: 238px;" data-speed="1"></div>
	<div class="cloud" data-type="white_2" style="top: 252px;" data-speed="2"></div>
	<div class="cloud" data-type="white_1" style="top: 481px;" data-speed="3"></div>
	<div class="cloud" data-type="white_5" style="top: 391px;" data-speed="5"></div>
	<div class="cloud" data-type="white_4" style="top: 410px;" data-speed="6"></div>
	<div class="cloud" data-type="white_6" style="top: 494px;" data-speed="7"></div>
	<div class="cloud" data-type="white_1" style="top: 254px;" data-speed="9"></div>
	<div class="cloud" data-type="white_2" style="top: 108px;" data-speed="10"></div>
	<div class="cloud" data-type="white_5" style="top: 126px;" data-speed="12"></div>
	<div class="cloud" data-type="white_6" style="top: 410px;" data-speed="15"></div>
	<div class="cloud" data-type="white_1" style="top: 198px;" data-speed="16"></div>
	<div class="cloud" data-type="white_2" style="top: 130px;" data-speed="17"></div>
	<div class="cloud" data-type="white_6" style="top: 274px;" data-speed="18"></div>
	<div class="cloud" data-type="white_2" style="top: 140px;" data-speed="20"></div>
	<div class="cloud" data-type="white_6" style="top: 312px;" data-speed="21"></div>
	<div class="cloud" data-type="white_2" style="top: 133px;" data-speed="23"></div>
	<div class="cloud" data-type="white_5" style="top: 541px;" data-speed="25"></div>
	<div class="cloud" data-type="white_2" style="top: 438px;" data-speed="29"></div>
	<div class="cloud" data-type="white_5" style="top: 225px;" data-speed="32"></div>
	<div class="cloud" data-type="white_3" style="top: 286px;" data-speed="33"></div>
	<div class="cloud" data-type="white_2" style="top: 416px;" data-speed="34"></div>
	<div class="cloud" data-type="white_6" style="top: 195px;" data-speed="36"></div>
	<div class="cloud" data-type="white_2" style="top: 281px;" data-speed="37"></div>
	<div class="cloud" data-type="white_1" style="top: 291px;" data-speed="38"></div>
	<div class="cloud" data-type="white_4" style="top: 196px;" data-speed="39"></div>
	<div class="cloud" data-type="white_6" style="top: 442px;" data-speed="40"></div>
</div>