使用 html css 和 javascript 程式碼的 Glassmorphism 卡錯覺

  
  
  <title>互動式玻璃卡</title>
  
    * {
      保證金：0；
      填充：0；
      框大小：邊框框；
    }
    身體 {
      背景：線性漸變（135deg，#101010，#1f1f1f）；
      高度：100vh；
      顯示：柔性；
      對齊項目：居中；
      調整內容：居中；
      溢出：隱藏；
      字體系列：Arial、無襯線字體；
    }
    .neon-shapes {
      位置：絕對；
      頂部：0；
      左：0；
      寬度：100%；
      高度：100%；
      指針事件：無；
    }
    .圓，.三角形，.矩形{
      位置：絕對；
      不透明度：0.8；
      濾鏡：模糊（2px）；
    }
    。圓圈 {
      寬度：200px；
      高度：200px；
      背景：rgba(0, 255, 255, 0.8);
      邊界半徑：50%；
      頂部：20%；
      左：15%；
    }
    。三角形 {
      寬度：0；
      高度：0；
      左邊框：100px 實心透明；
      右邊框：100px 實心透明；
      邊框底部: 200px 實心 rgba(255, 0, 255, 0.8);
      頂部：50%；
      左：70%；
    }
    。長方形 {
      寬度：220px；
      高度：180像素；
      背景：rgba(255, 255, 0, 0.8);
      頂部：70%；
      左：30%；
    }
    .card-container {
      顯示：柔性；
      間隙：20px；
      位置：相對；
      z 索引：1；
    }
    。卡片 {
      背景：rgba(255, 255, 255, 0.1);
      背景過濾器：模糊（10px）；
      寬度：230px；
      高度：320像素；
      邊框半徑：15px；
      顯示：柔性；
      彈性方向：列；
      對齊項目：居中；
      對齊內容：空間之間；
      內邊距：20px；
      盒子陰影：0 4px 30px rgba(0, 0, 0, 0.5);
      過渡：transform 0.3s 緩動，box-shadow 0.3s 緩動；
    }
    .card img {
      寬度：100px；
      高度：100px；
      邊界半徑：50%；
      過渡：變換0.3s，box-shadow 0.3s；
    }
    .卡 h3 {
      顏色: 白色;
      字體系列：「Lucida Sans」、「Lucida Sans Regular」、Geneva、Verdana、sans-serif；
    }
    。作者 {
      顏色: 白色;
      字體大小：14px；
      頂邊距：-10px；
    }
    .follow-btn {
      背景：rgba(0, 255, 127, 0.7);
      邊框：無；
      內邊距：15 像素 25 像素；
      邊框半徑：20px；
      顏色: 白色;
      字體大小：18px；
      遊標：指針；
      文字轉換：大寫；
      動畫：霓虹燈閃爍 2s 無限；
      過渡：背景0.3s；
    }
    .follow-btn:懸停{
      背景：rgba(0, 255, 127, 1);
    }
    @keyframes 霓虹燈閃爍 {
      0%, 100% {
        框陰影: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8);
      }
      50% {
        框陰影: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
      }
    }.card:懸停{
      變換：縮放（1.1）；
      盒子陰影: 0 8px 50px rgba(0, 255, 127, 0.8);
    }
    .card img {
  寬度：100px；
  高度：100px；
  邊界半徑：50%；
  過渡：變換 0.3s 緩動，過濾 0.3s 緩動；
}

.card:懸停img {
  變換：translateY(-10px);
}

.card img.active {
  變換：translateY(-30px) 縮放(1.2)；
  過濾器： drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}

  風格>
頭>

  <div>




          </div>

            
        

以上是使用 html css 和 javascript 程式碼的 Glassmorphism 卡錯覺的詳細內容。更多資訊請關注PHP中文網其他相關文章！