drop.pngdrop-filter
vanilla-tilt.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>frosted glass</title>
<style>
* {
margin: 0;
padding: 0
}
body {
background: #222 url(img/bridge.jpg) no-repeat;
object-fit: contain;
}
.card-panel {
display: flex;
justify-content: space-around;
height: 100vh;
}
.cards {
margin: auto 0;
background: rgba(255, 254, 255, 0.1);
color: #fff;
cursor: pointer;
border-radius: 10px;
border-left: 1px solid rgba(255, 254, 255, 0.5);
padding: 30px;
border-top: 1px solid rgba(255, 254, 255, 0.5);
backdrop-filter: blur(5px);
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
width: 22%;
line-height: 2;
text-align: justify;
}
.btn {
background: #fff;
color: #222;
padding: 10px 20px;
display: block;
width: 60%;
border-radius: 30px;
text-align: center;
margin: 0 auto;
text-decoration: none;
}
h1 {
text-align: center;
}
p {
padding: 20px 0;
min-height: 450px;
}
.img-thumb {
width: 70%;
border-radius: 50%;
object-fit: cover;
margin: 0 auto;
display: block;
aspect-ratio: 1;
}
</style>
</head>
<body>
<div class="card-panel">
<div class="cards" data-tilt>
<h1>奥黛丽·赫本</h1>
<p>
<img src="img/hb.webp" class="img-thumb" />
奥黛丽·赫本（Audrey
Hepburn，1929年5月4日－1993年1月20日），英国女星，生于比利时布鲁塞尔，知名音乐剧与电影女演员，晚年曾任联合国儿童基金会（UNICEF）特使。身为好莱坞最著名的女星之一，她以高雅的气质与有品味的穿着著称。生前主演的多部电影如《罗马假日》、《蒂凡尼的早餐》和《窈窕淑女》等至今仍为无数人眼中的经典。1999年，她被美国电影学会选为百年来最伟大的女演员第3名。
</p> <a class="btn" href="">了解更多</a>
</div>
<div class="cards" data-tilt>
<h1>奥黛丽·赫本</h1>
<p>
<img src="img/hb.webp" class="img-thumb" />
奥黛丽·赫本（Audrey
Hepburn，1929年5月4日－1993年1月20日），英国女星，生于比利时布鲁塞尔，知名音乐剧与电影女演员，晚年曾任联合国儿童基金会（UNICEF）特使。身为好莱坞最著名的女星之一，她以高雅的气质与有品味的穿着著称。生前主演的多部电影如《罗马假日》、《蒂凡尼的早餐》和《窈窕淑女》等至今仍为无数人眼中的经典。1999年，她被美国电影学会选为百年来最伟大的女演员第3名。
</p> <a class="btn" href="">了解更多</a>
</div>
<div class="cards" data-tilt>
<h1>奥黛丽·赫本</h1>
<p>
<img src="img/hb.webp" class="img-thumb" />
奥黛丽·赫本（Audrey
Hepburn，1929年5月4日－1993年1月20日），英国女星，生于比利时布鲁塞尔，知名音乐剧与电影女演员，晚年曾任联合国儿童基金会（UNICEF）特使。身为好莱坞最著名的女星之一，她以高雅的气质与有品味的穿着著称。生前主演的多部电影如《罗马假日》、《蒂凡尼的早餐》和《窈窕淑女》等至今仍为无数人眼中的经典。1999年，她被美国电影学会选为百年来最伟大的女演员第3名。
</p> <a class="btn" href="">了解更多</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt">
const element = document.querySelector(".cards");
VanillaTilt.init(element);
</script>
</body>
</html>
drop.png