素材8网-专注前端素材！
来源：https://www.sucai8.cn/15753.html

鼠标悬停动态倾斜多重效果展示代码

  • 941
  • 0
  • 0
html5鼠标悬停图片文字3D视差动画特效
元素的HTML结构
  1. <a href="#" class="tilter tilter--2">
  2.         <figure class="tilter__figure">
  3.                 <img class="tilter__image" src="img/3.jpg" alt="img03" />
  4.                 <div class="tilter__deco tilter__deco--shine"><div></div></div>
  5.                 <div class="tilter__deco tilter__deco--overlay"></div>
  6.                 <figcaption class="tilter__caption">
  7.                         <h3 class="tilter__title">Helen Portland</h3>
  8.                         <p class="tilter__description">Seattle</p>
  9.                 </figcaption>
  10.                 <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
  11.                         <path d="M20.5,20.5h260v375h-260V20.5z" />
  12.                 </svg>
  13.         </figure>
  14. </a>
复制代码
元素的样式
  1. .tilter {
  2.         position: relative;
  3.         display: block;
  4.         flex: none;
  5.         width: 300px;
  6.         height: 415px;
  7.         margin: 1.5em 2.5em;
  8.         color: #fff;
  9.         perspective: 1000px;
  10. }

  12. .tilter * {
  13.         pointer-events: none;
  14. }

  16. .tilter:hover,
  17. .tilter:focus {
  18.         color: #fff;
  19.         outline: none;
  20. }

  22. .tilter__figure,
  23. .tilter__image {
  24.         display: block;
  25.         width: 100%;
  26.         height: 100%;
  27.         margin: 0;
  28. }

  30. .tilter__figure > * {
  31.         transform: translateZ(0px); /* Force correct stacking order */
  32. }

  34. .tilter__figure {
  35.         position: relative;
  36. }

  38. .tilter__figure::before {
  39.         content: '';
  40.         position: absolute;
  41.         top: 5%;
  42.         left: 5%;
  43.         width: 90%;
  44.         height: 90%;
  45.         box-shadow: 0 30px 20px rgba(35,32,39,0.5);
  46. }

  48. .tilter__deco {
  49.         position: absolute;
  50.         top: 0;
  51.         left: 0;
  52.         overflow: hidden;
  53.         width: 100%;
  54.         height: 100%;
  55. }

  57. .tilter__deco--overlay {
  58.         background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));
  59. }

  61. .tilter__deco--shine div {
  62.         position: absolute;
  63.         top: -50%;
  64.         left: -50%;
  65.         width: 200%;
  66.         height: 200%;
  67.         background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  68. }

  70. .tilter__deco--lines {
  71.         fill: none;
  72.         stroke: #fff;
  73.         stroke-width: 1.5px;
  74. }

  76. .tilter__caption {
  77.         position: absolute;
  78.         bottom: 0;
  79.         width: 100%;
  80.         padding: 4em;
  81. }

  83. .tilter__title {
  84.         font-family: 'Abril Fatface', serif;
  85.         font-size: 2.5em;
  86.         font-weight: normal;
  87.         line-height: 1;
  88.         margin: 0;
  89. }

  91. .tilter__description {
  92.         font-size: 0.85em;
  93.         margin: 1em 0 0 0;
  94.         letter-spacing: 0.15em;
  95. }
复制代码
JavaScript
在选项中，我们可以定义每个动画元素将具有的动作：
我们可以传递以下内容：所有轴和动画的平移和旋转（持续时间，缓动和弹性 - 与anime.js选项相同的方式）以恢复为默认样式。
对于平移和旋转，我们可以通过以下方式定义每个轴的值：
number ：例如翻译：{X：10，Y：-10}意味着该元件将沿x轴从-10px从10px的移动为10px（我们着手从左至右的小鼠）和在y轴到-10px（当我们将鼠标从上到下移动时）。
array ：如翻译：{Z：[10,100]}这意味着该元件将沿z轴从10px的移动到100像素（如我们从顶端移动鼠标到下）

  1. Initialize:

  3. new TiltFx(el, [options]);

  5. The options:

  7. var options = {
  8.         movement: {
  9.                 // The main wrapper.
  10.                 imgWrapper : {
  11.                         translation : {x: 10, y: 10, z: 30},
  12.                         rotation : {x: 0, y: -10, z: 0},
  13.                         reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  14.                 },
  15.                 // The SVG lines element.
  16.                 lines : {
  17.                         translation : {x: 10, y: 10, z: [0,70]},
  18.                         rotation : {x: 0, y: 0, z: -2},
  19.                         reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
  20.                 },
  21.                 // The caption/text element.
  22.                 caption : {
  23.                         rotation : {x: 0, y: 0, z: 2},
  24.                         reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  25.                 },
  26.                 // The overlay element.
  27.                 overlay : {
  28.                         translation : {x: 10, y: -10, z: 0},
  29.                         rotation : {x: 0, y: 0, z: 2},
  30.                         reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
  31.                 },
  32.                 // The shine element.
  33.                 shine : {
  34.                         translation : {x: 100, y: 100, z: 0},
  35.                         reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  36.                 }
  37.         }
  38. }
复制代码
相关素材
鼠标悬停动态倾斜多重效果展示代码
  • 倒霉熊 刚刚下载了一个素材
  • 李舒楠 刚刚下载了一个素材
  • qqFz2 刚刚下载了一个素材
  • 沈阳云端科技张赛伦 刚刚下载了一个素材
  • 小k 刚刚下载了一个素材
  • qqKingJ73 刚刚下载了一个素材
  • qq略略略As5 刚刚下载了一个素材
  • qq梦想TPP 刚刚下载了一个素材
  • 晏惠梅 刚刚下载了一个素材
  • 阿白12345678 刚刚下载了一个素材
  • qq呱呱XB4 刚刚下载了一个素材
  • Owen111 刚刚下载了一个素材
  • H3789 刚刚下载了一个素材
  • 爱咸口吐司面包 刚刚下载了一个素材
  • qqwillWtJ 刚刚下载了一个素材
分享者：
分享者头像
素材网小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题