首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:27:38 CSS3   方向感应   鼠标滑过"

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

在线预览    源码下载

使用方法

HTML结构

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

  • 元素是一个网格。每个网格中使用一个元素来进行占位,实际上它是一个图片的小图标。另外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.   clearboth;   
    9. }   
    10.     
    11. li {   
    12.   positionrelative;   
    13.   floatleft;   
    14.   width200px;   
    15.   height200px;   
    16.   margin5px;   
    17.   padding: 0;   
    18.   list-stylenone;   
    19. }   
    20. li a {   
    21.   displayinline-block;   
    22.   vertical-aligntop;   
    23.   text-decorationnone;   
    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.   padding20px;   
    7.   positionabsolute;   
    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

  • 版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/78193.html

    留言与评论(共有 0 条评论)
       
    验证码:

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持