推荐一款神奇的3D倾斜库——vanilla-tilt.js

yiBen_

于 2024-08-30 16:57:14 发布

阅读量245

点赞数 5

文章标签： 3d javascript 开发语言

本文链接：https://blog.csdn.net/Sawiue/article/details/141721433

版权

3D倾斜库—vanilla-tilt.js

话不多说，直接上代码

vanilla-tilt.js官网地址
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #e9e9e9;
    }
    .container {
      width: 300px;
      background-color: white;
      margin: 200px auto;
      border-radius: 0 30px 0 0;
      transition: all 0.5s ease;
      transform-style: preserve-3d;
    }
    .container:hover {
      box-shadow: 10px 10px 14px 1px rgba(00, 00, 00, 0.2);
    }
    .container > div:nth-child(1) {
      padding: 10px 20px;
      transform: perspective(1000px);
      transform: translateZ(20px);
    }
    .container > div:nth-child(1) > p:nth-child(1) span {
      font-size: 17px;
    }
    .container > p {
      padding: 10px 5px;
      text-align: center;
      background: #6bd18e;
      color: #fff;
    }
    .container > p:hover {
      cursor: pointer;
    }
  </style>
  <body>
    <div
      class="container"
      data-tilt
      data-tilt-glare
      data-tilt-max="20"
      data-tilt-speed="50"
      data-tilt-perspective="500"
    >
      <div>
        <p><span>￥</span>100元</p>
        <p>有效期至：2024.8.23</p>
      </div>
      <p>查看店铺</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.babel.min.js"></script>
    <script type="text/javascript">
      VanillaTilt.init(document.querySelector(".container"), {
        max: 25,
        speed: 400,
      });
      VanillaTilt.init(document.querySelectorAll(".container"));
    </script>
  </body>
</html>