欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過圖片3D動畫

  發(fā)布時間：2016-03-16 10:08:21   作者：愛上程序猿   我要評論
這篇文章主要為大家詳細介紹了CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過圖片3D動畫，具有一定的參考價值，并兼容目前最新的各類主流瀏覽器，感興趣的小伙伴們可以參考一下

這是一款使用CSS3和一點JS來制作的炫酷帶方向感應(yīng)的鼠標(biāo)滑過圖片3D動畫特效。在特效中，當(dāng)用戶的鼠標(biāo)滑過網(wǎng)格中的圖片時，網(wǎng)格中的內(nèi)容遮罩層會出現(xiàn)3D翻轉(zhuǎn)動畫，并且?guī)в蟹较蚋袘?yīng)，能夠從鼠標(biāo)進入的方向開始翻轉(zhuǎn)，效果非常的酷。

在線預(yù)覽    源碼下載

使用方法

HTML結(jié)構(gòu)

該方向感應(yīng)鼠標(biāo)滑過動畫的HTML結(jié)構(gòu)采用無序列表的HTML結(jié)構(gòu)來制作網(wǎng)格布局，每一個<li>元素是一個網(wǎng)格。每個網(wǎng)格中使用一個<svg>元素來進行占位，實際上它是一個圖片的小圖標(biāo)。另外div.info是要進行3D翻轉(zhuǎn)的遮罩層。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class='container'>  
  2.   <ul>  
  3.     <li>  
  4.       <a class='normal' href='#'>  
  5.         <svg viewBox='0 0 80 76' x='0px' y='0px'>  
  6.           <g>  
  7.             <path d='M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z'></path>  
  8.           </g>  
  9.         </svg>  
  10.       </a>  
  11.       <div class='info'>  
  12.         <h3>...</h3>  
  13.         <p>....</p>  
  14.       </div>  
  15.     </li>  
  16.     ......   
  17.   </ul>  
  18. </div>      
  19.   

CSS樣式

整個網(wǎng)格布局使用無序列表來制作，所有的li元素都采用左浮動。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ul {   
  2.   padding: 0;   
  3.   margin: 0 0 50px;   
  4. }   
  5. ul:after {   
  6.   content: "";   
  7.   display: table;   
  8.   clear: both;   
  9. }   
  10.     
  11. li {   
  12.   position: relative;   
  13.   float: left;   
  14.   width: 200px;   
  15.   height: 200px;   
  16.   margin: 5px;   
  17.   padding: 0;   
  18.   list-style: none;   
  19. }   
  20. li a {   
  21.   display: inline-block;   
  22.   vertical-align: top;   
  23.   text-decoration: none;   
  24.   border-radius: 4px;   
  25. }      
  26.   

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. li {   
  2.   -webkit-perspective: 400px;   
  3.           perspective: 400px;   
  4. }       

用于制作3D翻轉(zhuǎn)的遮罩層div.info默認設(shè)置為100%的寬度和100%的高度，使用絕對定位，開始時位于左上角位置。然后使用rotate3d()函數(shù)將它沿X軸順時針旋轉(zhuǎn)90度，使其不可見。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .info {   
  2.   -webkit-transform: rotate3d(1, 0, 0, 90deg);   
  3.           transform: rotate3d(1, 0, 0, 90deg);   
  4.   width: 100%;   
  5.   height: 100%;   
  6.   padding: 20px;   
  7.   position: absolute;   
  8.   top: 0;   
  9.   left: 0;   
  10.   border-radius: 4px;   
  11.   pointer-events: none;   
  12.   background-color: rgba(26, 188, 156, 0.9);   
  13. }       
  14.   

最后在CSS樣式中為鼠標(biāo)從上下左右4個方向進入和離開時預(yù)設(shè)了class類，這些class是在鼠標(biāo)進入網(wǎng)格時，使用JavaScript來檢測鼠標(biāo)的進入方向，然后為其添加相應(yīng)的class類。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .in-top .info {   
  2.   -webkit-transform-origin: 50% 0%;   
  3.           transform-origin: 50% 0%;   
  4.   -webkit-animation: in-top 300ms ease 0ms 1 forwards;   
  5.           animation: in-top 300ms ease 0ms 1 forwards;   
  6. }   
  7.     
  8. .in-rightright .info {   
  9.   -webkit-transform-origin: 100% 0%;   
  10.           transform-origin: 100% 0%;   
  11.   -webkit-animation: in-rightright 300ms ease 0ms 1 forwards;   
  12.           animation: in-rightright 300ms ease 0ms 1 forwards;   
  13. }   
  14.     
  15. .in-bottombottom .info {   
  16.   -webkit-transform-origin: 50% 100%;   
  17.           transform-origin: 50% 100%;   
  18.   -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;   
  19.           animation: in-bottombottom 300ms ease 0ms 1 forwards;   
  20. }   
  21.     
  22. .in-left .info {   
  23.   -webkit-transform-origin: 0% 0%;   
  24.           transform-origin: 0% 0%;   
  25.   -webkit-animation: in-left 300ms ease 0ms 1 forwards;   
  26.           animation: in-left 300ms ease 0ms 1 forwards;   
  27. }   
  28.     
  29. .out-top .info {   
  30.   -webkit-transform-origin: 50% 0%;   
  31.           transform-origin: 50% 0%;   
  32.   -webkit-animation: out-top 300ms ease 0ms 1 forwards;   
  33.           animation: out-top 300ms ease 0ms 1 forwards;   
  34. }   
  35.     
  36. .out-rightright .info {   
  37.   -webkit-transform-origin: 100% 50%;   
  38.           transform-origin: 100% 50%;   
  39.   -webkit-animation: out-rightright 300ms ease 0ms 1 forwards;   
  40.           animation: out-rightright 300ms ease 0ms 1 forwards;   
  41. }   
  42.     
  43. .out-bottombottom .info {   
  44.   -webkit-transform-origin: 50% 100%;   
  45.           transform-origin: 50% 100%;   
  46.   -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;   
  47.           animation: out-bottombottom 300ms ease 0ms 1 forwards;   
  48. }   
  49.     
  50. .out-left .info {   
  51.   -webkit-transform-origin: 0% 0%;   
  52.           transform-origin: 0% 0%;   
  53.   -webkit-animation: out-left 300ms ease 0ms 1 forwards;   
  54.           animation: out-left 300ms ease 0ms 1 forwards;   
  55. }       
  56.   

 JavaScript

該特效中使用JavaScript來獲取鼠標(biāo)進入網(wǎng)格的方向，為相應(yīng)的網(wǎng)格動畫添加相應(yīng)的class類。其中g(shù)etDirection()函數(shù)為獲取方向函數(shù)。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var getDirection = function (ev, obj) {   
  2.     var w = obj.offsetWidth,    
  3.         h = obj.offsetHeight,    
  4.         x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1),    
  5.         y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1),    
  6.         d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   
  7.     return d;   
  8. };       
  9.   

然后通過遍歷所有的li元素，通過鼠標(biāo)進入的方向來添加相應(yīng)的class類。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var nodes = document.querySelectorAll('li'),   
  2.     _nodes = [].slice.call(nodes, 0);   
  3. var addClass = function (ev, obj, state) {   
  4.     var direction = getDirection(ev, obj), class_suffix = '';   
  5.     obj.className = '';   
  6.     switch (direction) {   
  7.     case 0:   
  8.         class_suffix = '-top';   
  9.         break;   
  10.     case 1:   
  11.         class_suffix = '-right';   
  12.         break;   
  13.     case 2:   
  14.         class_suffix = '-bottom';   
  15.         break;   
  16.     case 3:   
  17.         class_suffix = '-left';   
  18.         break;   
  19.     }   
  20.     obj.classList.add(state + class_suffix);   
  21. };   
  22. _nodes.forEach(function (el) {   
  23.     el.addEventListener('mouseover', function (ev) {   
  24.         addClass(ev, this, 'in');   
  25.     }, false);   
  26.     el.addEventListener('mouseout', function (ev) {   
  27.         addClass(ev, this, 'out');   
  28.     }, false);   
  29. });      

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/w2bc/p/5209690.html

相關(guān)文章

最新評論