HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

纯CSS3打造逼真的多层云彩动画特效

2016-4-6 10:28| 发布者: admin| 查看: 8112| 评论: 1|来自: jQuery之家

摘要: 这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果 ...

  简要教程

  这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果。

 

查看源码       下载插件

  使用方法

  HTML结构

  该多层云彩动画效果的HTML结构非常简单:使用一个div.sky作为天馈的背景层,在它的里面放置多个子<div>作为云彩容器。

<div class="sky">
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>      


  CSS样式

 

  作为天空背景的.sky元素设置一个固定的高度,采用相对定位,并使用 overflow: hidden;来隐藏超出范围的元素。开始时天空的颜色设置为一个较浅的蓝色#007fd5。然后为天空背景设置了一个sky_background的CSS3 animation动画,该动画在50秒的时间内,将天空背景的颜色由浅蓝色过渡到深蓝色,动画的animation-timing-function为ease-out,动画的迭代次数animation-iteration-count为无限循环。

 

  在该特效中,每一个元素都被设置了transform: translate3d(0, 0, 0)属性,该属性用于开启GPU的3D效果,提高显示的性能。

.sky {
    height: 480px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }                  

 

  云层1使用第一幅云彩PNG图片作为背景图片,使用绝对定位,相对于天空容器左对齐。高度和天空相等,宽度为天空容器的3倍。并执行cloud_one CSS3动画。该动画修改云彩层的left属性,使云彩水平移动。

.clouds_one {
    background: url("img/cloud_one.png");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }                  

  云彩2和云彩3的CSS3动画基本类似云彩1,只是动画的持续时间animation-duration不相同,云彩1的持续时间 为50秒,云彩2的持续时间为75秒,云彩3的持续时间为100秒。这样各个云层的动画时间各不相同,会得到一些背景视觉差的效果。

 

  来源:jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 meque 2016-5-19 17:09
现在有很多小伙伴在自学,但是一个人的能力是有限的,遇到问题没人帮你解决,我给大家推荐一个大神学习交流q un,希望对大家能有所帮助,q un号前面是思七一,中间是零儿七,后面是一武四。这里每晚都有大牛直播教学。

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 03:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部