图片特效

多个图片一个接着一个出现特效，使用css3动画方式实现，代码如下：

<style>
  .imgCloud{
    position: absolute;
    animation: scal ease-out 1s;
    -webkit-animation: scal ease-out 1s;
    top:30px;
    left:100px;
  }
  .imgCloud2{
    position: absolute;
    top:60px;
    left:200px;
    animation: scal ease-out 1s 0.3s,hide ease 0.3s 0s;
    -wenkit-animation: scal ease-out 1s 0.3s,hide ease 0.3s 0s;
  }
  .imgCloud3{
    position: absolute;
    top:90px;
    left:300px;
    animation: scal ease-out 1s 0.6s,hide ease 0.6s 0s;
    -webkit-animation: scal ease-out 1s 0.6s,hide ease 0.6s 0s;
  }
  .imgCloud4{
    position: absolute;
    top:150px;
    left:400px;
    animation: scal ease-out 1s 0.9s,hide ease 0.9s 0s;
    -webkit-animation: scal ease-out 1s 0.9s,hide ease 0.9s 0s;
  }
  .imgCloud5{
    position: absolute;
    top:200px;
    left:500px;
    animation: scal ease-out 1s 1.2s,hide ease 1.2s 0s;
    -webkit-animation: scal ease-out 1s 1.2s,hide ease 1.2s 0s;
  }
  @keyframes scal {
    0% {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
    }
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @-webkit-keyframes scal {
    0% {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
    }
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes hide {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes hide {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .positionImg{
    position: relative;
    width: 80%;
    margin: 0 auto;
    height: 800px;
  }
</style>

<div class="positionImg">
  <img src="http://ink-portal-formal.chinagazelle.cn/00001.jpg-activity2" class="imgCloud" alt="" width="200px">
  <img src="http://ink-portal-formal.chinagazelle.cn/00036.jpg-activity2" class="imgCloud2"  alt="" width="200px">
  <img src="http://wh.gei.com.cn:8081/dh/images/dh-innovation/qth.png" class="imgCloud3" alt="" width="200px">
  <img src="http://ink-portal-formal.chinagazelle.cn/00001.jpg-activity2" class="imgCloud4" alt="" width="200px">
  <img src="http://ink-portal-formal.chinagazelle.cn/00036.jpg-activity2"  class="imgCloud5" alt="" width="200px">
</div>

<script>
  // $(".positionImg > .imgCloud").each(function(i,m){
  //     console.log(i,m)
	//   $(this).css({"top": Math.random()*10 + $(this).width(), "left": Math.random()*10 + $(this).height(),"animation-delay": Math.random()})
  // })
  function aniTime(){
      var aniTime = Math.random()+3;
      return aniTime + "s";
  }
  function posTop(){
      var posTop = Math.random() + 200;
      return posTop + "px";
  }
// console.log(posTop(),posLeft(),aniTime(),aniDel());
  function posLeft(){
      var posLeft = Math.random() + 200;
      return posLeft + "px";
  }
  function aniDel(){
      var aniDel = Math.random();
      return aniDel + 2 + "s";
  }
  // for(var i = 0; i < $(".positionImg > .imgCloud").length; i++){
  //     $(".positionImg > .imgCloud").eq(i).css({"animation-duration":aniTime($(this)),"top": posTop($(this)), "left":posLeft($(this)),"animation-delay": aniDel($(this))})
  //
  // }
  function hideTime(time){
      $(this).css({"animation":"delTime linear" + time})
  }
</script>

需要引用jq，最终效果是一个一个层叠出现，需要可以自行复制即可，可能还有一些冗余代码，截图如下：