✨ 有玻璃變形效果的發光迪斯可燈泡動畫！ ✨ 程式碼 HTML CSS 和 JAVASCRIPT

  
  
  <title>迪斯可燈泡動畫</title>
  
    身體 {
      保證金：0；
      高度：100vh；
      顯示：柔性；
      調整內容：居中；
      對齊項目：居中；
      背景：線性漸層（45deg，#000000，#111111）；
      字體系列：Arial、無襯線字體；
    }

    。容器 {
      顯示：柔性；
      間隙：200px；
    }

    。牆 {
      顯示：柔性；
      彈性方向：列；
      對齊內容：空間之間；
      高度：300px；
      內邊距：15px；
      邊框半徑：10px；
      背景：rgba(96,95,95,0.281);
      背景過濾器：模糊（10px）；
      盒子陰影：0 4px 10px rgba(0, 0, 0, 0.5);
    }

    。電燈泡 {
      寬度：60 像素；
      高度：60 像素；
      背景：rgba(255, 255, 255, 0.1);
      邊框: 2px 實心 rgba(255, 255, 255, 0.2);
      邊界半徑：50%；
      背景過濾器：模糊（10px）；
      框陰影: 0 0 5px rgba(255, 255, 255, 0.2), 圖 0 0 10px rgba(255, 255, 255, 0.1);
      過渡：box-shadow 0.3s，background-color 0.3s；
    }

    .bulb.glow {
      動畫：迪斯可0.2s無限交替；
    }

    @keyframes迪斯可{
      0% {
        背景顏色: rgba(255, 0, 128, 0.8);
        盒子陰影: 0 0 40px 40px rgba(255, 0, 128, 0.8);
      }
      25% {
        背景顏色: rgba(0, 255, 128, 0.8);
        盒子陰影: 0 0 30px 10px rgba(0, 255, 128, 0.8);
      }
      50% {
        背景顏色: rgba(0, 128, 255, 0.8);
        框陰影: 0 0 30px 10px rgba(0, 128, 255, 0.8);
      }
      75% {
        背景顏色: rgba(255, 255, 0, 0.8);
        盒子陰影: 0 0 30px 10px rgba(255, 255, 0, 0.8);
      }
      100% {
        背景顏色: rgba(255, 128, 0, 0.8);
        盒子陰影: 0 0 30px 10px rgba(255, 128, 0, 0.8);
      }
    }

    .開始按鈕{
      位置：絕對；
      底部：50 像素；
      內邊距：15 像素 30 像素；
      背景：#ff5722；
      顏色: 白色;
      邊框：無；
      邊框半徑：10px；
      遊標：指針；
      字體大小：18px；
      字體粗細：粗體；
      盒子陰影：0 4px 8px rgba(0, 0, 0, 0.5);
      過渡：背景0.3s；
    }

    .開始按鈕：懸停{
      背景：#ff784e；
    }
  風格>
頭>

  <div>




          </div>

            
        

以上是✨ 有玻璃變形效果的發光迪斯可燈泡動畫！ ✨ 程式碼 HTML CSS 和 JAVASCRIPT的詳細內容。更多資訊請關注PHP中文網其他相關文章！