suchen

Heim >Web-Frontend >js-Tutorial >✨ Leuchtende Disco-Glühbirnen-Animation mit einem glasmorphischen Touch! ✨ Code HTML, CSS und JAVASCRIPT

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-24 17:25:13444Durchsuche

✨ 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>

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!

JavaScript css html Filter pointer display position margin padding border viewport background transition animation column flex
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie führe ich jQuery-Ajax-Datei-Uploads ohne Plugins durch?Nächster Artikel：Wie führe ich jQuery-Ajax-Datei-Uploads ohne Plugins durch?

In Verbindung stehende Artikel

Mehr sehen