CSS毛玻璃效果实例

田

发布于 2023-10-18 10:30:37

1310

发布于 2023-10-18 10:30:37

文章被收录于专栏：IT杂症IT杂症

drop.png

drop-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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-07-06，如有侵权请联系 cloudcommunity@tencent.com 删除

css