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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 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
YB217、YB235、YB400浅听
2021/03/02 无线电
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php 面向对象的一个例子
2011/04/12 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
Bootstrap表单布局
2016/07/19 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
详解写好JS条件语句的5条守则
2019/02/28 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
python time模块用法实例详解
2014/09/11 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
softmax及python实现过程解析
2019/09/30 Python
Python中过滤字符串列表的方法
2020/12/22 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
前台领班岗位职责
2013/12/04 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
闪闪红星观后感
2015/06/08 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers