Weihnachtsbaum-Animation mit HTML-CSS- und JS-Code-js-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-27 22:16:11

Original

975 Leute haben es durchsucht

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>
 
 
 
 
           
 
            

Nach dem Login kopieren

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!