小编给大家分享一下css3如何实现简单的白云飘动背景特效,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!HTML结构该白云飘动特效的html结果非常简单,使用一个<div>来包裹一组作为白云的<div>
小编给大家分享一下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如何实现简单的白云飘动背景特效”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!
--结束END--
本文标题: css3如何实现简单的白云飘动背景特效
本文链接: https://www.lsjlt.com/news/251014.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0