2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

简单的纯CSS3白云飘动背景特效

时间:08-20来源:作者:点击数:121

这是一款非常简单的纯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插件。天空中白云朵朵,你可以通过这个插件来设置云朵的大小、位置、模糊以及被风吹动的效果。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门