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. }
  10. li{
  11. position:relative;
  12. float:left;
  13. width:200px;
  14. height:200px;
  15. margin:5px;
  16. padding:0;
  17. list-style:none;
  18. }
  19. lia{
  20. display:inline-block;
  21. vertical-align:top;
  22. text-decoration:none;
  23. border-radius:4px;
  24. }

同时为了制作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. }
  7. .in-rightright.info{
  8. -webkit-transform-origin:100%0%;
  9. transform-origin:100%0%;
  10. -webkit-animation:in-rightright300msease0ms1forwards;
  11. animation:in-rightright300msease0ms1forwards;
  12. }
  13. .in-bottombottom.info{
  14. -webkit-transform-origin:50%100%;
  15. transform-origin:50%100%;
  16. -webkit-animation:in-bottombottom300msease0ms1forwards;
  17. animation:in-bottombottom300msease0ms1forwards;
  18. }
  19. .in-left.info{
  20. -webkit-transform-origin:0%0%;
  21. transform-origin:0%0%;
  22. -webkit-animation:in-left300msease0ms1forwards;
  23. animation:in-left300msease0ms1forwards;
  24. }
  25. .out-top.info{
  26. -webkit-transform-origin:50%0%;
  27. transform-origin:50%0%;
  28. -webkit-animation:out-top300msease0ms1forwards;
  29. animation:out-top300msease0ms1forwards;
  30. }
  31. .out-rightright.info{
  32. -webkit-transform-origin:100%50%;
  33. transform-origin:100%50%;
  34. -webkit-animation:out-rightright300msease0ms1forwards;
  35. animation:out-rightright300msease0ms1forwards;
  36. }
  37. .out-bottombottom.info{
  38. -webkit-transform-origin:50%100%;
  39. transform-origin:50%100%;
  40. -webkit-animation:out-bottombottom300msease0ms1forwards;
  41. animation:out-bottombottom300msease0ms1forwards;
  42. }
  43. .out-left.info{
  44. -webkit-transform-origin:0%0%;
  45. transform-origin:0%0%;
  46. -webkit-animation:out-left300msease0ms1forwards;
  47. animation:out-left300msease0ms1forwards;
  48. }

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鼠标照亮边框效果