标签：00 container color tilt vanilla transform js 10px
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>
标签：00,
container,
color,
tilt,
vanilla,
transform,
js,
10px
From： https://blog.csdn.net/Sawiue/article/details/141721433