css3 模拟标牌震荡效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>css3 模拟标牌震荡效果</title>
  <style type="text/css" media="screen">
    .title{
      width: 1082px;
      height: 69px;
      background: url(img/title-biaobai.png) center 90px no-repeat;
      margin: 0 auto;
      background-position: 0;
    }  
    .flipInX {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX;
    }
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    /*一种震荡效果*/
    @keyframes flipInX {
      /*先翻转90度与电脑屏幕垂直*/
      0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(0px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
      /*自然过渡落下到，负一边20度*/
      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      /*自然过渡落下到，10度*/
      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
      /*自然过渡落下到，负一边5度*/
      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
      /*然后恢复正常与屏幕平行*/
      100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }
    
  </style>
</head>
<body>  
  <div style="height: 500px;">
    
  </div>
  <div class="title">
    
  </div>
  <div style="height: 500px;">
    
  </div>
  <div class="title">
    
  </div>
  <div style="height: 500px;">
    
  </div>
  <div class="title">
    
  </div>
  <div style="height: 500px;">
    
  </div>
  <script src="js/jquery.js"></script>
  <script>  
    $(document).ready(function(){
        //如果已经有元素满足动画条件，就在加载完毕，调用一次
        initTitle();
        //监听窗口滚动事件
        $(window).scroll(initTitle);
    });
    function initTitle(){
      //获取到滚动条距离浏览器顶部的距离
      var top = $(document).scrollTop();
      //获取到浏览器窗口当前的高度
      var height = $(window).height();
      //获取到当前class中包含title 的元素，这里获取到的是多个元素
      var items = $(".title")
      items.each(function(){
        //先把this赋值给一个变量，
        var m = $(this);
        //获取到每个item距离顶端的距离
        var itemTop = m.offset().top;
        //这里加100是为了有更好的用户体验
        //在控制台中打印
        console.log(top+"---"+itemTop);
        if(top > itemTop-height+100){
          m.addClass('flipInX animated');
        } else {
          return false;//跳过不用走的
        }
      });         
    }
  </script>
</body>
</html>
View Code
效果如下：当第一次出现在视野中时，震动一次
css3 模拟标牌震荡效果