纯CSS3白云飘动动画效果

来源:https://www.sucaihuo.com/js/2526.html 2017-07-24 22:06浏览(1231) 收藏

一款纯CSS3白云飘动动画效果,有多种白云的形状,通过不同的移动速度在页面指定位置进行飘浮移动,可以自由设置白云的形状和移动速度,适合做成动态的登录或注册的表单背景,喜欢的童鞋请收下吧。
纯CSS3白云飘动动画效果
分类:html/css > 图形 难易:初级
查看演示 下载资源: 11 下载资源 下载积分: 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>
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 椅子
    12-28 09:52
    蕃***薯
    效果是有,色彩不艳
  • 头像 沙发
    07-25 08:57
    欢***3
    哈哈,这个挺有意思的
1 2