<!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="/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>
HTML5+CSS3+JS小实例:逼真的玻璃卡片悬停效果
173 浏览量
2024-01-23
11:46:52
上传
评论 1
收藏 1.83MB 7Z 举报
耀南.
- 粉丝: 6609
- 资源: 32
最新资源
- Picasso_v3.1 2.ipa
- chromedriver-mac-arm64.zip
- 蓝zapro.apk
- chromedriver-linux64.zip
- UCAS研一深度学习实验-MNIST手写数字识别python源码+详细注释(高分项目)
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务,并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- 基于SVM多特征融合的微表情识别python源码+项目说明+详细注释(高分课程设计)
- html动态爱心代码一(附源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈