✨ Leuchtende Disco-Glühbirnen-Animation mit einem glasmorphischen Touch! ✨ Code HTML, CSS und JAVASCRIPT-js-Tutorial-php.cn

✨ Leuchtende Disco-Glühbirnen-Animation mit einem glasmorphischen Touch! ✨ Code HTML, CSS und JAVASCRIPT

Patricia Arquette

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

Original

408 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disco Bulb Animation</title>
  <Stil>
    Körper {
      Rand: 0;
      Höhe: 100 Vh;
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Hintergrund: linear-gradient(45deg, #000000, #111111);
      Schriftfamilie: Arial, serifenlos;
    }

    .container {
      Anzeige: Flex;
      Lücke: 200px;
    }

    .Wand {
      Anzeige: Flex;
      Flexrichtung: Spalte;
      justify-content: Leerzeichen dazwischen;
      Höhe: 300px;
      Polsterung: 15px;
      Randradius: 10px;
      Hintergrund: rgba(96, 95, 95, 0,281);
      Hintergrundfilter: Unschärfe (10 Pixel);
      Box-Shadow: 0 4px 10px rgba(0, 0, 0, 0,5);
    }

    .bulb {
      Breite: 60px;
      Höhe: 60px;
      Hintergrund: rgba(255, 255, 255, 0,1);
      Rand: 2px solid rgba(255, 255, 255, 0,2);
      Randradius: 50 %;
      Hintergrundfilter: Unschärfe (10 Pixel);
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
      Übergang: Box-Shadow 0,3 s, Hintergrundfarbe 0,3 s;
    }

    .bulb.glow {
      Animation: Disco 0,2 s unendlich abwechselnd;
    }

    @keyframes Disco {
      0 % {
        Hintergrundfarbe: rgba(255, 0, 128, 0,8);
        Box-Shadow: 0 0 40px 40px rgba(255, 0, 128, 0,8);
      }
      25 % {
        Hintergrundfarbe: rgba(0, 255, 128, 0,8);
        Box-Shadow: 0 0 30px 10px rgba(0, 255, 128, 0,8);
      }
      50 % {
        Hintergrundfarbe: rgba(0, 128, 255, 0,8);
        Box-Shadow: 0 0 30px 10px rgba(0, 128, 255, 0,8);
      }
      75 % {
        Hintergrundfarbe: rgba(255, 255, 0, 0,8);
        Box-Shadow: 0 0 30px 10px rgba(255, 255, 0, 0,8);
      }
      100 % {
        Hintergrundfarbe: rgba(255, 128, 0, 0,8);
        Box-Shadow: 0 0 30px 10px rgba(255, 128, 0, 0,8);
      }
    }

    .start-button {
      Position: absolut;
      unten: 50px;
      Polsterung: 15px 30px;
      Hintergrund: #ff5722;
      Farbe: weiß;
      Grenze: keine;
      Randradius: 10px;
      Cursor: Zeiger;
      Schriftgröße: 18px;
      Schriftstärke: fett;
      Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0,5);
      Übergang: Hintergrund 0,3 s;
    }

    .start-button:hover {
      Hintergrund: #ff784e;
    }
  </style>
</head>
<Körper>
  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt von✨ Leuchtende Disco-Glühbirnen-Animation mit einem glasmorphischen Touch! ✨ Code HTML, CSS und JAVASCRIPT. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!