✨ Animasi Mentol Disko Bercahaya dengan Putaran Glassmorphic! ✨ Kod HTML CSS DAN JAVASCRIPT-tutorial js-php.cn

✨ Animasi Mentol Disko Bercahaya dengan Putaran Glassmorphic! ✨ Kod HTML CSS DAN JAVASCRIPT

Patricia Arquette

Lepaskan： 2024-12-24 17:25:13

asal

402 orang telah melayarinya

✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code HTML CSS AND JAVASCRIPT

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <tajuk>Animasi Mentol Disko</title>
  <gaya>
    badan {
      margin: 0;
      ketinggian: 100vh;
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      latar belakang: kecerunan linear(45deg, #000000, #111111);
      font-family: Arial, sans-serif;
    }

    .bekas {
      paparan: flex;
      jurang: 200px;
    }

    .dinding {
      paparan: flex;
      flex-direction: lajur;
      justify-content: ruang-antara;
      ketinggian: 300px;
      padding: 15px;
      jejari sempadan: 10px;
      latar belakang: rgba(96, 95, 95, 0.281);
      backdrop-filter: blur(10px);
      bayang-kotak: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    .bulb {
      lebar: 60px;
      ketinggian: 60px;
      latar belakang: rgba(255, 255, 255, 0.1);
      sempadan: 2px rgba pepejal(255, 255, 255, 0.2);
      jejari sempadan: 50%;
      backdrop-filter: blur(10px);
      bayang-kotak: 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
      peralihan: bayang-kotak 0.3s, warna latar belakang 0.3s;
    }

    .bulb.glow {
      animasi: disko 0.2s silih berganti;
    }

    @keyframes disko {
      0% {
        warna latar belakang: rgba(255, 0, 128, 0.8);
        bayang-kotak: 0 0 40px 40px rgba(255, 0, 128, 0.8);
      }
      25% {
        warna latar belakang: rgba(0, 255, 128, 0.8);
        bayang-kotak: 0 0 30px 10px rgba(0, 255, 128, 0.8);
      }
      50% {
        warna latar belakang: rgba(0, 128, 255, 0.8);
        bayang-kotak: 0 0 30px 10px rgba(0, 128, 255, 0.8);
      }
      75% {
        warna latar belakang: rgba(255, 255, 0, 0.8);
        bayang-kotak: 0 0 30px 10px rgba(255, 255, 0, 0.8);
      }
      100% {
        warna latar belakang: rgba(255, 128, 0, 0.8);
        bayang-kotak: 0 0 30px 10px rgba(255, 128, 0, 0.8);
      }
    }

    .butang mula {
      jawatan: mutlak;
      bawah: 50px;
      padding: 15px 30px;
      latar belakang: #ff5722;
      warna: putih;
      sempadan: tiada;
      jejari sempadan: 10px;
      kursor: penunjuk;
      saiz fon: 18px;
      font-weight: tebal;
      bayang-kotak: 0 4px 8px rgba(0, 0, 0, 0.5);
      peralihan: latar belakang 0.3s;
    }

    .start-button:hover {
      latar belakang: #ff784e;
    }
  </style>
</head>
<badan>
  <div>

Salin selepas log masuk

Atas ialah kandungan terperinci ✨ Animasi Mentol Disko Bercahaya dengan Putaran Glassmorphic! ✨ Kod HTML CSS DAN JAVASCRIPT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!