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

互联网
在放大镜下，你可以看到每一片雪花都是一幅幅精美的图案：有的是晶莹的薄片，有的像白亮的银针，有的像一把张开的小扇，有的像夜空的星星……

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

在线预览 源码下载

使用方法

HTML结构

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

XML/HTML Code复制内容到剪贴板
  1. <divclass='container'>
  2. <ul>
  3. <li>
  4. <aclass='normal'rel="nofollow noopener noreferrer" href='#'>
  5. <svgviewBox='008076'x='0px'y='0px'>
  6. <g>
  7. <pathd='M68.970824.8623L60.45542.3018......68.0625Z'></path>
  8. </g>
  9. </svg>
  10. </a>
  11. <divclass='info'>
  12. <h3>...</h3>
  13. <p>....</p>
  14. </div>
  15. </li>
  16. ......
  17. </ul>
  18. </div>

CSS样式

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

CSS Code复制内容到剪贴板
  1. ul{
  2. padding:0;
  3. margin:0050px;
  4. }
  5. ul:after{
  6. content:"";
  7. display:table;
  8. clear:both;
  9. }
  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. lia{
  21. display:inline-block;
  22. vertical-align:top;
  23. text-decoration:none;
  24. border-radius:4px;
  25. }

同时为了制作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. }

最后在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-top300msease0ms1forwards;
  5. animation:in-top300msease0ms1forwards;
  6. }
  8. .in-rightright.info{
  9. -webkit-transform-origin:100%0%;
  10. transform-origin:100%0%;
  11. -webkit-animation:in-rightright300msease0ms1forwards;
  12. animation:in-rightright300msease0ms1forwards;
  13. }
  15. .in-bottombottom.info{
  16. -webkit-transform-origin:50%100%;
  17. transform-origin:50%100%;
  18. -webkit-animation:in-bottombottom300msease0ms1forwards;
  19. animation:in-bottombottom300msease0ms1forwards;
  20. }
  22. .in-left.info{
  23. -webkit-transform-origin:0%0%;
  24. transform-origin:0%0%;
  25. -webkit-animation:in-left300msease0ms1forwards;
  26. animation:in-left300msease0ms1forwards;
  27. }
  29. .out-top.info{
  30. -webkit-transform-origin:50%0%;
  31. transform-origin:50%0%;
  32. -webkit-animation:out-top300msease0ms1forwards;
  33. animation:out-top300msease0ms1forwards;
  34. }
  36. .out-rightright.info{
  37. -webkit-transform-origin:100%50%;
  38. transform-origin:100%50%;
  39. -webkit-animation:out-rightright300msease0ms1forwards;
  40. animation:out-rightright300msease0ms1forwards;
  41. }
  43. .out-bottombottom.info{
  44. -webkit-transform-origin:50%100%;
  45. transform-origin:50%100%;
  46. -webkit-animation:out-bottombottom300msease0ms1forwards;
  47. animation:out-bottombottom300msease0ms1forwards;
  48. }
  50. .out-left.info{
  51. -webkit-transform-origin:0%0%;
  52. transform-origin:0%0%;
  53. -webkit-animation:out-left300msease0ms1forwards;
  54. animation:out-left300msease0ms1forwards;
  55. }

JavaScript

该特效中使用JavaScript来获取鼠标进入网格的方向，为相应的网格动画添加相应的class类。其中getDirection()函数为获取方向函数。

JavaScript Code复制内容到剪贴板
  1. vargetDirection=function(ev,obj){
  2. varw=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. returnd;
  8. };

然后通过遍历所有的li元素，通过鼠标进入的方向来添加相应的class类。

JavaScript Code复制内容到剪贴板
  1. varnodes=document.querySelectorAll('li'),
  2. _nodes=[].slice.call(nodes,0);
  3. varaddClass=function(ev,obj,state){
  4. vardirection=getDirection(ev,obj),class_suffix='';
  5. obj.className='';
  6. switch(direction){
  7. case0:
  8. class_suffix='-top';
  9. break;
  10. case1:
  11. class_suffix='-right';
  12. break;
  13. case2:
  14. class_suffix='-bottom';
  15. break;
  16. case3:
  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

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果