suchen

Heim >Web-Frontend >js-Tutorial >Weihnachtsbaum-Animation mit HTML-CSS- und JS-Code

Weihnachtsbaum-Animation mit HTML-CSS- und JS-Code

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-27 22:16:11904Durchsuche

Christmas Tree animation using html css and js code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D-Weihnachtsbaum</title>
  <Stil>
    Körper {
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Höhe: 100 Vh;
      Rand: 0;
      Hintergrundfarbe: #000;
      Perspektive: 1000px; /* Perspektive zur Szene hinzufügen */
    }
    .Baum {
      Position: relativ;
      Transformationsstil: Preserve-3d; /* Stellen Sie sicher, dass untergeordnete Elemente im 3D-Raum gerendert werden */
      transformieren: rotateX(30deg); /* Drehe den Baum in die richtige Richtung */
    }
    .Stern {
      Position: absolut;
      Schriftgröße: 12px;
      Deckkraft: 0;
      Animation: 1 Sekunde lang unendlich abwechselnd blinken, 5 Sekunden lang erscheinen;
    }
    @keyframes funkeln {
      von { Deckkraft: 1; }
      bis { Deckkraft: 0,5; }
    }
    @keyframes erscheinen {
      von { Deckkraft: 0; }
      zu { Deckkraft: 1; }
    }
  </style>
</head>
<Körper>
  <div>

Das obige ist der detaillierte Inhalt vonWeihnachtsbaum-Animation mit HTML-CSS- und JS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using JS display position margin viewport background transform animation 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 kann ich Elementklassen in JavaScript dynamisch verwalten?Nächster Artikel：Wie kann ich Elementklassen in JavaScript dynamisch verwalten?

In Verbindung stehende Artikel

Mehr sehen