css实现玻璃磨砂材质卡片效果代码-html代码-BFW代码库

css实现玻璃磨砂材质卡片效果代码

代码语言：html

代码描述：css实现玻璃磨砂材质卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
        
        body {
          /* solid background */
          background: rgb(0,212,255);
          
          /* gradient background*/
          background: linear-gradient(45deg, rgba(0,212,255,1) 0%, rgba(11,3,45,1) 100%);    
          
          /* photo background */
          background-image: url(//repo.bfw.wiki/bfwrepo/image/6275a2464efe8.png);
          background-size: cover;
          background-position: center;  
          
          display: flex;
          align-items: center;
          justify-content: center;    
          height: 100vh;  
        }
        
        .container {
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          background-color: rgba(17, 25, 40, 0.25);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.125);  
          padding: 38px;  
          filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content:center;
          text-align: center;
          
        }
        
        .wrapper {
          width: 100%;
          height: 100%;
          
        }
        
        .banner-image {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90);
          background-position: center;
          background-size: cover;
          height: 300px;
          width: 100%;
          border-radius: 12px;
          border: 1px solid rgba(255,255,255, 0.255)
        }
        
        h1{
          font-family: 'Righteous', sans-serif;
          color: rgba(255,255,255,0.98);
          text-transform: uppercase;
          font-size: 2.4rem;
        }
      .........完整代码请登录后点击上方下载按钮下载查看