宜宾网站建设公司

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

本篇内容介绍了“CSS3制作带方向感应的鼠标滑过图片3D动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

目前成都创新互联公司已为上1000家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、鼓楼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

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

在线预览    源码下载

使用方法

HTML结构

该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局，每一个

  • 元素是一个网格。每个网格中使用一个元素来进行占位，实际上它是一个图片的小图标。另外div.info是要进行3D翻转的遮罩层。

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

    1.   

    2.   

          

      •     

      •   

      •         

      •           

      •             

      •               

      •             

      •           

      •         

      •         

      •         

        ...

          

      •         

        ....

          

      •       

    •   

  •     

    •   

  •     ......   

  •     

    •       

  •   

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

    “CSS3制作带方向感应的鼠标滑过图片3D动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    标题名称：CSS3制作带方向感应的鼠标滑过图片3D动画
    分享网址：http://ybzwz.com/article/gcdhgp.html

    其他资讯