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

小编给大家分享一下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; -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如何实现简单的白云飘动背景特效”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！