大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下css3如何实现简单的白云飘动背景特效,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联,为您提供重庆网站建设公司、网站制作、网站营销推广、网站开发设计,对服务成都墙体彩绘等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
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如何实现简单的白云飘动背景特效”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!