CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
程序员文章站
2023-12-11 19:54:58
这篇文章主要为大家详细介绍了CSS3制作炫酷带方向感应的鼠标滑过图片3D动画,具有一定的参考价值,并兼容目前最新的各类主流浏览器,感兴趣的小伙伴们可以参考一下... 16-03-16...
这是一款使用css3和一点js来制作的炫酷带方向感应的鼠标滑过图片3d动画特效。在特效中,当用户的鼠标滑过网格中的图片时,网格中的内容遮罩层会出现3d翻转动画,并且带有方向感应,能够从鼠标进入的方向开始翻转,效果非常的酷。
使用方法
html结构
该方向感应鼠标滑过动画的html结构采用无序列表的html结构来制作网格布局,每一个<li>元素是一个网格。每个网格中使用一个<svg>元素来进行占位,实际上它是一个图片的小图标。另外div.info是要进行3d翻转的遮罩层。
xml/html code复制内容到剪贴板
- <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元素都采用左浮动。
css code复制内容到剪贴板
- 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元素添加透视属性。
css code复制内容到剪贴板
- li {
- -webkit-perspective: 400px;
- perspective: 400px;
- }
用于制作3d翻转的遮罩层div.info默认设置为100%的宽度和100%的高度,使用绝对定位,开始时位于左上角位置。然后使用rotate3d()函数将它沿x轴顺时针旋转90度,使其不可见。
css code复制内容到剪贴板
- .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类。
css code复制内容到剪贴板
- .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()函数为获取方向函数。
javascript code复制内容到剪贴板
- 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类。
javascript code复制内容到剪贴板
- 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);
- });
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文: