css3 模擬標牌震盪效果

時間 2019-12-20

標籤 css3 css 模擬標牌震盪效果欄目 CSS 简体版

原文原文鏈接

<!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

效果以下：當第一次出如今視野中時，震動一次css

css3 模擬標牌震盪效果html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。