51 lines
1.8 KiB
HTML
51 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
||
<title>逼真的玻璃卡片悬停效果</title>
|
||
<link rel="stylesheet" href="../css/87.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="card">
|
||
<div class="content">
|
||
<h2>01</h2>
|
||
<h3>Card One</h3>
|
||
<p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
|
||
<a href="#">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="content">
|
||
<h2>02</h2>
|
||
<h3>Card Two</h3>
|
||
<p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
|
||
<a href="#">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="content">
|
||
<h2>03</h2>
|
||
<h3>Card Three</h3>
|
||
<p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
|
||
<a href="#">Read More</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../js/vanilla-tilt.js"></script>
|
||
<script>
|
||
// vanilla-tilt.js是一个平滑的3D倾斜JS库，具体参数配置度娘可查到
|
||
VanillaTilt.init(document.querySelectorAll(".card"),{
|
||
max: 15, //最大倾斜度数
|
||
speed: 400, //倾斜转换的速度
|
||
glare: true, //是否开启眩光效果
|
||
"max-glare": 1 //最大眩光的不透明度
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |