这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云,以不同的速度进行运动,形成白云飘动的效果。
使用方法
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;}
- }
推荐:jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件。天空中白云朵朵,你可以通过这个插件来设置云朵的大小、位置、模糊以及被风吹动的效果。