• 首页
  • 电影
  • Js
  • 前端
  • 新旅
  • 奇技
  • 网安
  • 歌单
  • 关于
  • 搜索
  • 夜间模式
    ©2013-2025  成长小破站 Theme by OneBlog
    搜索
    标签
    # css # js # uniapp # ps # chrome # 小程序 # javascript # 布局 # typecho # 激活码
  • 首页>
  • Javascript>
  • 正文
  • CSS毛玻璃效果实例

    2023年07月06日 2 k 阅读 0 评论 3809 字

    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>
    本文著作权归作者 [ admin ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    csscss毛玻璃特效毛玻璃
    取消回复

    发表留言
    回复

    首页电影Js前端新旅奇技网安歌单关于
    Copyright©2013-2025  All Rights Reserved.  Load:0.033 s
    豫公网安备41050202000235   豫ICP备18019224号-2
    Theme by OneBlog V3.6.4
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。