首頁 >後端開發 >php教程 >如何使用CSS3製作酷炫帶方向感應的滑鼠滑過圖片3D動畫

如何使用CSS3製作酷炫帶方向感應的滑鼠滑過圖片3D動畫

不言原創: 2018-06-21 17:01:261709瀏覽

這篇文章主要為大家詳細介紹了CSS3製作酷炫帶方向感應的滑鼠滑過圖片3D動畫，具有一定的參考價值，並兼容目前最新的各類主流瀏覽器，感興趣的小伙伴們可以參考一下

這是一款使用CSS3和一點JS來製作的酷帶方向感應的滑鼠滑過圖片3D動畫特效。在特效中，當使用者的滑鼠滑過網格中的圖片時，網格中的內容遮罩層會出現3D翻轉動畫，並且帶有方向感應，能夠從滑鼠進入的方向開始翻轉，效果非常的酷。

線上預覽原始碼下載

使用方法

HTML結構

此方向感應滑鼠滑過動畫的HTML結構採用無序列表的HTML結構來製作網格佈局，每一個25edfb22a4f469ecb59f1190150159c6元素是一個網格。每個網格中使用一個486d7a50595533609bc98d44595dc670元素來進行佔位，實際上它是一個圖片的小圖示。另外p.info是要進行3D翻轉的遮罩層。

<p class=&#39;container&#39;>  
  <ul>  
    <li>  
      <a class=&#39;normal&#39; href=&#39;#&#39;>  
        <svg viewBox=&#39;0 0 80 76&#39; x=&#39;0px&#39; y=&#39;0px&#39;>  
          <g>  
            <path d=&#39;M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z&#39;></path>  
          </g>  
        </svg>  
      </a>  
      <p class=&#39;info&#39;>  
        <h3>...</h3>  
        <p>....</p>  
      </p>  
    </li>  
    ......   
  </ul>  
</p>

CSS樣式

整個網格佈局使用無序列表來製作，所有的li元素都採用左浮動。

ul {   
  padding: 0;   
  margin: 0 0 50px;   
}   
ul:after {   
  content: "";   
  display: table;   
  clear: both;   
}   
    
li {   
  position: relative;   
  float: left;   
  width: 200px;   
  height: 200px;   
  margin: 5px;   
  padding: 0;   
  list-style: none;   
}   
li a {   
  display: inline-block;   
  vertical-align: top;   
  text-decoration: none;   
  border-radius: 4px;   
}

同時為了製作3D效果，為每個li元素加入透視屬性。

li {   
  -webkit-perspective: 400px;   
          perspective: 400px;   
}

用於製作3D翻轉的遮罩層p.info預設為100%的寬度和100%的高度，使用絕對定位，開始時位於左上角位置。然後使用rotate3d()函數將它沿著X軸順時針旋轉90度，使其不可見。

.info {   
  -webkit-transform: rotate3d(1, 0, 0, 90deg);   
          transform: rotate3d(1, 0, 0, 90deg);   
  width: 100%;   
  height: 100%;   
  padding: 20px;   
  position: absolute;   
  top: 0;   
  left: 0;   
  border-radius: 4px;   
  pointer-events: none;   
  background-color: rgba(26, 188, 156, 0.9);   
}

最後在CSS樣式中為滑鼠從上下左右4個方向進入和離開時預設了class類，這些class是在滑鼠進入網格時，使用JavaScript來檢測滑鼠的進入方向，然後為其新增對應的class類別。

.in-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;   
          animation: in-top 300ms ease 0ms 1 forwards;   
}   
    
.in-rightright .info {   
  -webkit-transform-origin: 100% 0%;   
          transform-origin: 100% 0%;   
  -webkit-animation: in-rightright 300ms ease 0ms 1 forwards;   
          animation: in-rightright 300ms ease 0ms 1 forwards;   
}   
    
.in-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;   
          animation: in-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.in-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;   
          animation: in-left 300ms ease 0ms 1 forwards;   
}   
    
.out-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;   
          animation: out-top 300ms ease 0ms 1 forwards;   
}   
    
.out-rightright .info {   
  -webkit-transform-origin: 100% 50%;   
          transform-origin: 100% 50%;   
  -webkit-animation: out-rightright 300ms ease 0ms 1 forwards;   
          animation: out-rightright 300ms ease 0ms 1 forwards;   
}   
    
.out-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;   
          animation: out-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.out-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;   
          animation: out-left 300ms ease 0ms 1 forwards;   
}

JavaScript

此特效中使用JavaScript來取得滑鼠進入網格的方向，並為對應的網格動畫新增對應的類類別。其中getDirection()函數為取得方向函數。

var getDirection = function (ev, obj) {   
    var w = obj.offsetWidth,    
        h = obj.offsetHeight,    
        x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1),    
        y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1),    
        d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   
    return d;   
};

然後透過遍歷所有的li元素，透過滑鼠進入的方向來加入對應的類類。

var nodes = document.querySelectorAll(&#39;li&#39;),   
    _nodes = [].slice.call(nodes, 0);   
var addClass = function (ev, obj, state) {   
    var direction = getDirection(ev, obj), class_suffix = &#39;&#39;;   
    obj.className = &#39;&#39;;   
    switch (direction) {   
    case 0:   
        class_suffix = &#39;-top&#39;;   
        break;   
    case 1:   
        class_suffix = &#39;-right&#39;;   
        break;   
    case 2:   
        class_suffix = &#39;-bottom&#39;;   
        break;   
    case 3:   
        class_suffix = &#39;-left&#39;;   
        break;   
    }   
    obj.classList.add(state + class_suffix);   
};   
_nodes.forEach(function (el) {   
    el.addEventListener(&#39;mouseover&#39;, function (ev) {   
        addClass(ev, this, &#39;in&#39;);   
    }, false);   
    el.addEventListener(&#39;mouseout&#39;, function (ev) {   
        addClass(ev, this, &#39;out&#39;);   
    }, false);   
});

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

如何使用CSS3製作酷炫帶方向感應的滑鼠滑過圖片3D動畫

相關文章