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实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
不要在HTML中滥用div
May 08 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写日志的实现方法
2014/11/05 PHP
php实现微信模板消息推送
2018/03/30 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
js变量提升深入理解
2016/09/16 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python的一些用法分享
2012/10/07 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python SVM 线性分类模型的实现
2019/07/19 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
COS美国官网:知名服装品牌
2019/04/08 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
2014年向国旗敬礼活动总结
2014/09/27 职场文书
基石观后感
2015/06/12 职场文书
走进科学观后感
2015/06/18 职场文书
Nginx 匹配方式
2022/05/15 Servers