css3实现简单的白云飘动背景特效


Posted in HTML / CSS onOctober 28, 2020

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云,以不同的速度进行运动,形成白云飘动的效果。

css3实现简单的白云飘动背景特效

HTML结构

该白云飘动特效的HTML结果非常简单,使用一个<div>来包裹一组作为白云的<div>元素。

<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

CSS样式

白云使用.cloud 和它的:before和:after伪元素来制作。

.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}

每一朵白云都执行moveclouds动画,但是它们的动画速度各不相同。大小和透明度也各不相同。

.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
......
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

以上就是css3实现简单的白云飘动背景特效的详细内容,更多关于CSS3特效的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php class类的用法详细总结
2013/10/17 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
详解python中的装饰器
2018/07/10 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
简单了解python单例模式的几种写法
2019/07/01 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python中get和post有什么区别
2020/06/19 Python
python-地图可视化组件folium的操作
2020/12/14 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
销售实习自我鉴定
2013/12/07 职场文书
淘宝活动策划方案
2014/02/06 职场文书
运动会广播稿150字
2014/02/19 职场文书
商场广播稿范文
2015/08/19 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python