CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

前端  /  管理员 发布于 7年前   139

这是一款使用CSS3和一点JS来制作的炫酷带方向感应的鼠标滑过图片3D动画特效。在特效中，当用户的鼠标滑过网格中的图片时，网格中的内容遮罩层会出现3D翻转动画，并且带有方向感应，能够从鼠标进入的方向开始翻转，效果非常的酷。

在线预览    源码下载

使用方法

HTML结构

该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局，每一个<li>元素是一个网格。每个网格中使用一个<svg>元素来进行占位，实际上它是一个图片的小图标。另外div.info是要进行3D翻转的遮罩层。

XML/HTML Code复制内容到剪贴板

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样式

整个网格布局使用无序列表来制作，所有的li元素都采用左浮动。

CSS Code复制内容到剪贴板

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复制内容到剪贴板

1. li {   
2.   -webkit-perspective: 400px;   
3.           perspective: 400px;   
4. }       

用于制作3D翻转的遮罩层div.info默认设置为100%的宽度和100%的高度，使用绝对定位，开始时位于左上角位置。然后使用rotate3d()函数将它沿X轴顺时针旋转90度，使其不可见。

CSS Code复制内容到剪贴板

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样式中为鼠标从上下左右4个方向进入和离开时预设了class类，这些class是在鼠标进入网格时，使用JavaScript来检测鼠标的进入方向，然后为其添加相应的class类。

CSS Code复制内容到剪贴板

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来获取鼠标进入网格的方向，为相应的网格动画添加相应的class类。其中getDirection()函数为获取方向函数。

JavaScript Code复制内容到剪贴板

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元素，通过鼠标进入的方向来添加相应的class类。

JavaScript Code复制内容到剪贴板

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. });      

以上就是本文的全部内容，希望对大家的学习有所帮助。

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