iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >CSS3制作带方向感应的鼠标滑过图片3D动画
  • 916
分享到

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

2024-04-02 19:04:59 916人浏览 泡泡鱼
摘要

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

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

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

CSS3制作带方向感应的鼠标滑过图片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.         <h4>...</h4>  

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

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

--结束END--

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

本文链接: https://www.lsjlt.com/news/77978.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS3制作带方向感应的鼠标滑过图片3D动画
    本篇内容介绍了“CSS3制作带方向感应的鼠标滑过图片3D动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • CSS3实现感应鼠标的背景闪烁和图片缩放动画效果
    这篇文章主要介绍“CSS3实现感应鼠标的背景闪烁和图片缩放动画效果”,在日常操作中,相信很多人在CSS3实现感应鼠标的背景闪烁和图片缩放动画效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作