CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016-03-16 10:08
691 查看
这是一款使用CSS3和一点JS来制作的炫酷带方向感应的鼠标滑过图片3D动画特效。在特效中,当用户的鼠标滑过网格中的图片时,网格中的内容遮罩层会出现3D翻转动画,并且带有方向感应,能够从鼠标进入的方向开始翻转,效果非常的酷。
在线预览 源码下载
使用方法
HTML结构
该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局,每一个<li>元素是一个网格。每个网格中使用一个<svg>元素来进行占位,实际上它是一个图片的小图标。另外div.info是要进行3D翻转的遮罩层。
CSS样式
整个网格布局使用无序列表来制作,所有的li元素都采用左浮动。
同时为了制作3D效果,为每一个li元素添加透视属性。
用于制作3D翻转的遮罩层div.info默认设置为100%的宽度和100%的高度,使用绝对定位,开始时位于左上角位置。然后使用rotate3d()函数将它沿X轴顺时针旋转90度,使其不可见。
最后在CSS样式中为鼠标从上下左右4个方向进入和离开时预设了class类,这些class是在鼠标进入网格时,使用JavaScript来检测鼠标的进入方向,然后为其添加相应的class类。
JavaScript
该特效中使用JavaScript来获取鼠标进入网格的方向,为相应的网格动画添加相应的class类。其中getDirection()函数为获取方向函数。
然后通过遍历所有的li元素,通过鼠标进入的方向来添加相应的class类。
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文:http://www.cnblogs.com/w2bc/p/5209690.html
在线预览 源码下载
使用方法
HTML结构
该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局,每一个<li>元素是一个网格。每个网格中使用一个<svg>元素来进行占位,实际上它是一个图片的小图标。另外div.info是要进行3D翻转的遮罩层。
<div class='container'> <ul> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>...</h3> <p>....</p> </div> </li> ...... </ul> </div>
CSS样式
整个网格布局使用无序列表来制作,所有的li元素都采用左浮动。
ul { padding: 0; margin: 0 0 50px; } ul:after { content: ""; display: table; clear: both; } li { position: relative; float: left; width: 200px; height: 200px; margin: 5px; padding: 0; list-style: none; } li a { display: inline-block; vertical-align: top; text-decoration: none; border-radius: 4px; }
同时为了制作3D效果,为每一个li元素添加透视属性。
li { -webkit-perspective: 400px; perspective: 400px; }
用于制作3D翻转的遮罩层div.info默认设置为100%的宽度和100%的高度,使用绝对定位,开始时位于左上角位置。然后使用rotate3d()函数将它沿X轴顺时针旋转90度,使其不可见。
.info { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; border-radius: 4px; pointer-events: none; background-color: rgba(26, 188, 156, 0.9); }
最后在CSS样式中为鼠标从上下左右4个方向进入和离开时预设了class类,这些class是在鼠标进入网格时,使用JavaScript来检测鼠标的进入方向,然后为其添加相应的class类。
.in-top .info { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: in-top 300ms ease 0ms 1 forwards; animation: in-top 300ms ease 0ms 1 forwards; } .in-rightright .info { -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-animation: in-rightright 300ms ease 0ms 1 forwards; animation: in-rightright 300ms ease 0ms 1 forwards; } .in-bottombottom .info { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards; animation: in-bottombottom 300ms ease 0ms 1 forwards; } .in-left .info { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-animation: in-left 300ms ease 0ms 1 forwards; animation: in-left 300ms ease 0ms 1 forwards; } .out-top .info { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: out-top 300ms ease 0ms 1 forwards; animation: out-top 300ms ease 0ms 1 forwards; } .out-rightright .info { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: out-rightright 300ms ease 0ms 1 forwards; animation: out-rightright 300ms ease 0ms 1 forwards; } .out-bottombottom .info { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards; animation: out-bottombottom 300ms ease 0ms 1 forwards; } .out-left .info { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-animation: out-left 300ms ease 0ms 1 forwards; animation: out-left 300ms ease 0ms 1 forwards; }
JavaScript
该特效中使用JavaScript来获取鼠标进入网格的方向,为相应的网格动画添加相应的class类。其中getDirection()函数为获取方向函数。
var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1), y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1), d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; return d; };
然后通过遍历所有的li元素,通过鼠标进入的方向来添加相应的class类。
var nodes = document.querySelectorAll('li'), _nodes = [].slice.call(nodes, 0); var addClass = function (ev, obj, state) { var direction = getDirection(ev, obj), class_suffix = ''; obj.className = ''; switch (direction) { case 0: class_suffix = '-top'; break; case 1: class_suffix = '-right'; break; case 2: class_suffix = '-bottom'; break; case 3: class_suffix = '-left'; break; } obj.classList.add(state + class_suffix); }; _nodes.forEach(function (el) { el.addEventListener('mouseover', function (ev) { addClass(ev, this, 'in'); }, false); el.addEventListener('mouseout', function (ev) { addClass(ev, this, 'out'); }, false); });
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文:http://www.cnblogs.com/w2bc/p/5209690.html
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 用css filter做鼠标滑过图片效果
- 鼠标滑过缩略图时放大图片(纯Css)
- 鼠标滑过 放大显示效果的列表
- jQuery CSS3相结合实现时钟插件
- php上传功能集后缀名判断和随机命名(强力推荐)
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- CSS3中Transition属性详解以及示例分享