方向感知鼠标悬停效果动画
来源：互联网 发布：淘宝儿童折叠床 编辑：程序博客网 时间：2024/06/05 21:10
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>方向感知鼠标悬停效果动画</title> <style type="text/css"> @charset "utf-8"; /* CSS Document */ html{ font-family:arial; color:#aaa; } body{ background-color:#2C3437; } a{ color:#5555ff; } ul{ width: 500px; } li{ display: inline-block; list-style: none; margin: 2px 0; } .container{ text-align:center; perspective:500px; -webkit-perspective:500px; border: 1px solid; } .example{ display:table-cell; vertical-align:middle; color: #fff; width: 150px; height: 150px; background:url(../images/01.jpg) no-repeat; } @-webkit-keyframes topenter { from { -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); } to { -webkit-transform-origin:top; -webkit-transform:rotateX(0deg); } } @keyframes topenter { from { transform-origin:top; transform:rotateX(-90deg); } to { transform-origin:top; transform:rotateX(0deg); } } @-webkit-keyframes topleave { from { -webkit-transform-origin:top; -webkit-transform:rotateX(0deg); } to { -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); } } @keyframes topleave { from { transform-origin:top; transform:rotateX(0deg); } to { transform-origin:top; transform:rotateX(-90deg); } } @-webkit-keyframes bottomenter { from { -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); } to { -webkit-transform-origin:bottom; -webkit-transform:rotateX(0deg); } } @keyframes bottomenter { from { transform-origin:bottom; transform:rotateX(90deg); } to { transform-origin:bottom; transform:rotateX(0deg); } } @-webkit-keyframes bottomleave { from { -webkit-transform-origin:bottom; -webkit-transform:rotateX(0deg); } to { -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); } } @keyframes bottomleave { from { transform-origin:bottom; transform:rotateX(0deg); } to { transform-origin:bottom; transform:rotateX(90deg); } } @-webkit-keyframes leftenter { from { -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); } to { -webkit-transform-origin:left; -webkit-transform:rotateY(0deg); } } @keyframes leftenter { from { transform-origin:left; transform:rotateY(90deg); } to { transform-origin:left; transform:rotateY(0deg); } } @-webkit-keyframes leftleave { from { -webkit-transform-origin:left; -webkit-transform:rotateY(0deg); } to { -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); } } @keyframes leftleave { from { transform-origin:left; transform:rotateY(0deg); } to { transform-origin:left; transform:rotateY(90deg); } } @-webkit-keyframes rightenter { from { -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); } to { -webkit-transform-origin:right; -webkit-transform:rotateY(0deg); } } @keyframes rightenter { from { transform-origin:right; transform:rotateY(-90deg); } to { transform-origin:right; transform:rotateY(0deg); } } @-webkit-keyframes rightleave { from { -webkit-transform-origin:right; -webkit-transform:rotateY(0deg); } to { -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); } } @keyframes rightleave { from { transform-origin:right; transform:rotateY(0deg); } to { transform-origin:right; transform:rotateY(-90deg); } } </style></head><body><script type="text/javascript" src="js/jquery.min.js"></script> <div id="wrapper"> <ul> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li><li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> <li> <div class="container"> <div class="example"></div> </div> </li> </ul> </div> <script> $(function () { //initialize $('.container').css({ 'perspective-origin': '50% 0%', '-webkit-perspective-origin': '50% 0%' }); $('.container .example').css({ 'animation': 'topleave 400ms forwards', '-webkit-animation': 'topleave 400ms forwards' }); $('.container').bind('mouseenter mouseleave', function (e) { var dir = getDirection($(this), e), enter = e.type === 'mouseenter', topPerspectiveOrigin = { 'perspective-origin': '50% 0%', '-webkit-perspective-origin': '50% 0%' }, rightPerspectiveOrigin = { 'perspective-origin': '100% 50%', '-webkit-perspective-origin': '100% 50%' }, bottomPerspectiveOrigin = { 'perspective-origin': '50% 100%', '-webkit-perspective-origin': '50% 100%' }, leftPerspectiveOrigin = { 'perspective-origin': '0% 50%', '-webkit-perspective-origin': '0% 50%' }, $target = $(this).find('.example'); switch (dir) { case 0: if (enter) { $(this).css(topPerspectiveOrigin); $target.css({ 'animation': 'topenter 400ms forwards', '-webkit-animation': 'topenter 400ms forwards' }); } else { $(this).css(topPerspectiveOrigin); $target.css({ 'animation': 'topleave 400ms forwards', '-webkit-animation': 'topleave 400ms forwards' }); }; break; case 1: if (enter) { $(this).css(rightPerspectiveOrigin); $target.css({ 'animation': 'rightenter 400ms forwards', '-webkit-animation': 'rightenter 400ms forwards' }); } else { $(this).css(rightPerspectiveOrigin); $target.css({ 'animation': 'rightleave 400ms forwards', '-webkit-animation': 'rightleave 400ms forwards' }); }; break; case 2: if (enter) { $(this).css(bottomPerspectiveOrigin); $target.css({ 'animation': 'bottomenter 400ms forwards', '-webkit-animation': 'bottomenter 400ms forwards' }); } else { $(this).css(bottomPerspectiveOrigin); $target.css({ 'animation': 'bottomleave 400ms forwards', '-webkit-animation': 'bottomleave 400ms forwards' }); }; break; case 3: if (enter) { $(this).css(leftPerspectiveOrigin); $target.css({ 'animation': 'leftenter 400ms forwards', '-webkit-animation': 'leftenter 400ms forwards' }); } else { $(this).css(leftPerspectiveOrigin); $target.css({ 'animation': 'leftleave 400ms forwards', '-webkit-animation': 'leftleave 400ms forwards' }); }; break; } }); }) function getDirection($element, event) { var w = $element.width(), h = $element.height(), x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1), y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1), direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; return direction; } </script></body></html>阅读全文
0 0
- 方向感知鼠标悬停效果动画
- 图片悬停 DirectionAwareHoverEffect 跟随鼠标方向悬停效果（精）
- 【CSS3】多款炫酷鼠标悬停图文动画效果
- 鼠标悬停动画
- datagrid鼠标悬停效果
- 鼠标悬停效果
- 鼠标经过悬停效果
- 鼠标悬停效果
- css3鼠标悬停效果
- CSS3实现鼠标悬停动画
- CSS3鼠标悬停动画源代码
- 【CSS3特效】鼠标悬停动画
- DIV滚动 鼠标悬停效果
- 鼠标悬停显示详细信息效果
- 流行的鼠标悬停效果
- css3 鼠标悬停效果收集
- 鼠标悬停与点击效果
- a标签鼠标悬停效果
- notify & notify all
- TensorFlow报错的解决方案（持续更新）
- 冒泡排序及其改进算法
- java反射回顾<一>
- java网络编程之传统IO与伪异步IO（一）
- 方向感知鼠标悬停效果动画
- Azure 中虚拟机的计划内维护
- Spring入门到应用
- Java POI 写入Excel
- 面试题积累
- android开源框架RxPermissions动态权限申请
- linux命令之查看程序动态库依赖-ldd
- TensorFlow学习系列（一）——GPU指定
- Mybatis处理枚举类型
