使用 HTML 和 CSS 創建令人驚嘆的彎曲並顯示具有幻覺背景的懸停效果

在 Instagram 上追蹤我們：https://www.instagram.com/webstreet_code/

  
  
  <title>彎曲和顯示效果</title>
  
    * {
      保證金：0；
      填充：0；
      框大小：邊框框；
    }
    身體 {
      顯示：柔性；
      調整內容：居中；
      對齊項目：居中；
      高度：100vh；
      背景：線性漸變（135deg，#1e1e1e，#3c3c3c）；
      溢出：隱藏；
      字體系列：Arial、無襯線字體；
    }
    。容器 {
      位置：相對；
      寬度：300px；
      高度：400像素；
      視角：1200px；
      溢出：可見；
    }

    /* 虛幻的發光網格背景 */
    .illusion-bg {
      位置：絕對；
      頂部：-20px；
      左：-20px；
      寬度：計算（100% 40px）；
      高度：計算（100% 40px）；
      背景：重複線性漸層（45deg，
       rgba(255, 255, 255, 0.1) 0 5px, 透明 5px 10px);
      邊框半徑：15px；
      框陰影：圖 0 0 50px rgba(255, 255, 255, 0.05),
       0 0 30px rgba(0, 255, 255, 0.5);
      z 索引：-1；
      濾鏡：模糊（5px）；
    }

    .image-wrapper {
      位置：相對；
      寬度：100%；
      高度：100%；
      變換原點：中心底部；
      過渡：變換 0.8s 緩動，box-shadow 0.8s 緩動，濾鏡 0.6s 緩動；
      邊框半徑：15px；
      溢出：隱藏；
      z 索引：1；
    }
    .image-wrapper img {
      寬度：100%；
      高度：100%；
      物件適配：覆蓋；
      邊框半徑：15px；
      濾鏡：亮度（80%）；
      過渡：過濾0.8s緩和；
    }

    .reveal-png {
      位置：絕對；
      頂部：0；
      左：0；
      寬度：100%；
      高度：100%；
      背景： url('./removebg.png') 無重複中心；
      背景大小：封面；
      不透明度：0；
      變換：translateY(50px) 縮放(0.9)；
      過渡：不透明度 0.8s 緩動，變換 0.8s 緩動，濾鏡 0.6s 緩動；
      過濾器： drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* 懸停效果 */
    .container:hover .image-wrapper {
      變換：旋轉X（-70度）縮放（1.05）；
      盒子陰影：0 30px 60px rgba(0, 0, 0, 0.8);
      濾鏡：色調旋轉(30deg)；
    }

    .container:hover .image-wrapper img {
      濾鏡：亮度（100%）飽和度（1.2）；
    }

    .container:懸停 .reveal-png {
      z 索引：1；
      不透明度：1；
      變換：translateY(0) 縮放(1.06)；
      過濾器： drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:懸停 .illusion-bg {
      動畫：脈衝 2​​s 無限交替緩入緩出；
    }

    @關鍵幀脈衝{
      0% {
        變換：縮放（1）；
        不透明度：0.8；
      }
      100% {
        變換：縮放（1.05）；
        不透明度：1；
      }
    }
  風格>
頭>


<div>




          </div>

以上是使用 HTML 和 CSS 創建令人驚嘆的彎曲並顯示具有幻覺背景的懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！