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

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2021-12-01 04:37 · 阅读：9251

这篇文章主要介绍了css3实现简单的白云飘动背景特效的示例，帮助大家制作网页特效，美化自己的网站，感兴趣的朋友可以了解下

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

HTML结构

该白云飘动特效的HTML结果非常简单，使用一个

来包裹一组作为白云的

元素。

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中文网其它相关文章！

标签：

特效 CSS3

0133技术栈

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

相关文章

css3媒体查询中device-width和width的区别详解

CSS3媒体查询实现不同宽度的下不同内容的展示功能

CSS3几种实现子容器水平垂直居中的方法

css3实现文字首尾衔接跑马灯的示例代码

CSS的浮动及清除浮动的5种方法介绍