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教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python 中的 else详解
2016/04/23 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
管理部部长岗位职责
2013/12/05 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016年元旦致辞
2015/08/01 职场文书
《搭石》教学反思
2016/02/18 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python