<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.your-element{
width: 500px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<!--3D 倾斜效果
https://micku7zu.github.io/vanilla-tilt.js/index.html
{
reverse: false, // 倾斜方向
max: 35, ////最大倾斜旋转（度）
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // //应该禁用什么轴。可以是X或Y
reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false //“眩光”效果
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
}
-->
<div class="your-element"><img src="./images/xxx.jpg" alt=""></div>
<script type="text/javascript" src="./js/vanilla-tilt.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelector(".your-element"), {
reverse:true,
max: 100,
speed: 800,
glare:true
});
</script>
</body>
</html>
时间： 2024-10-14 04:33:57