Detaillierte Erklärung des dynamischen Weihnachtsbaums durch JavaScript

Detaillierte Erklärung des dynamischen Weihnachtsbaums durch JavaScript

1. Animierter Weihnachtsbaum, nur mit CSS erstellt

Demo-Adresse: http://haiyong.site/christmastree1 (es wird empfohlen, sie auf einem Computer zu öffnen. Die mobile Version wird etwas verzerrt sein, wenn sie nicht reagiert. Alternativ können Sie sich den Weihnachtsbaum im Hintergrund ansehen.)

HTML Quelltext:

Der HTML-Code hier ist vollständig und ungeschnitten.

<div Klasse="Kartencontainer">
  <div Klasse="Schneeflocken-1"></div>
  <div Klasse="Schneeflocken-2"></div>
  <h2>Als nächstes kommen Schneeflocken, Weihnachtsbäume, Neujahr und</h2>
  <h1>Besser wir</h1>
  <div Klasse="Baumcontainer">
    <div Klasse="ball-0"></div>
    <div Klasse="Baum-p1">
      <ul>
        <li>
          <div Klasse="Weihnachtsball Ball-1"></div>
          <div Klasse = "Baum-linker-Zweig"></div>
        </li>
        <li><div Klasse="Baum-rechts-Zweig"></div></li>
      </ul>
    </div>
    <div Klasse="Baum-p2">
      <ul>
        <li>
          <div Klasse="Weihnachtsball Ball-2"></div>
          <div Klasse = "Baum-linker-Zweig"></div>
        </li>
        <li>
          <div Klasse="Weihnachtsball Ball-3"></div>
          <div Klasse = "Baum-rechter-Zweig"></div>
        </li>
      </ul>
    </div>
    <div Klasse="Baum-p3">
      <ul>
        <li>
          <div Klasse="Weihnachtsball Ball-6"></div>
          <div Klasse = "Baum-linker-Zweig"></div>
        </li>
        <li>
          <div Klasse="Weihnachtsball Ball-5"></div>
          <div Klasse="Weihnachtsball Ball-4"></div>
          <div Klasse = "Baum-rechter-Zweig"></div>
        </li>
      </ul>
    </div>
    <div Klasse="Baum-p4">
      <ul>
        <li>
          <div Klasse="Weihnachtsball Ball-7"></div>
          <div Klasse="Weihnachtsball Ball-8"></div>
          <div Klasse = "Baum-linker-Zweig"></div>
        </li>
        <li>
          <div Klasse="Weihnachtsball Ball-9"></div>
          <div Klasse="Weihnachtsball Ball-10"></div>
          <div Klasse = "Baum-rechts-Zweig hartnäckig"></div>
        </li>
      </ul>
    </div>
    <div Klasse="Holz"></div>
    <div Klasse="präsentiert">
      <div Klasse="Gegenwartscontainer-1">
        <div Klasse="Krawatte"></div>
        <div Klasse = "lid"></div>
        <div Klasse="Box"></div>
      </div>
      <div Klasse="Gegenwartscontainer-2">
        <div Klasse="Krawatte"></div>
        <div Klasse = "lid"></div>
        <div Klasse="Box"></div>
      </div>
    </div>
  </div>
  <h3>Frohe Weihnachten!</h3>
  <p><span>von Haiyong</span></p>
</div>

CSS-Hauptcode

Es gibt viel CSS, ich habe einige der Hauptcodes abgefangen

Körper {
  Höhe: 100vh;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Farbe: #000;
}

ul {
  Listenstiltyp: keiner;
}

ul li {
  Anzeige: Inline-Block;
}

h1 {
  Schriftfamilie: „Mountains of Christmas“, kursiv;
  Schriftgröße: 42px;
  Zeilenhöhe: 60px;
  -webkit-background-clip: Text;
  -webkit-text-fill-color: transparent;
}

h1::vorher, h1::nachher {
  Inhalt: "❆";
  Rand: 0 10px;
}

h2 {
  Schriftfamilie: „Source Sans Pro“, serifenlos;
  Schriftgröße: 14px;
  Texttransformation: Großbuchstaben;
  Buchstabenabstand: 2px;
}

h3 {
  Schriftfamilie: „Open Sans Condensed“, serifenlos;
  Schriftstärke: 300;
  Schriftgröße: 18px;
  Buchstabenabstand: 2px;
  Rand unten: 5px;
}

P {
  Schriftfamilie: „Dancing Script“, kursiv;
  Schriftgröße: 20px;
  Schriftstärke: 700;
}

Spanne {
  Schriftfamilie: „Roboto“, serifenlos;
  Schriftgröße: 14px;
  Schriftstärke: 400;
}

.Kartencontainer {
  Höhe: 675px;
  Breite: 675px;
  Polsterung: 30px;
  Hintergrundfarbe: rgba(255, 255, 255, 0,6);
  Rand: 8px doppelt #fff;
  Rahmenradius: 20px;
  Textausrichtung: zentriert;
  Randradius: 50 %;
  -Webkit-Randradius: 50 %;
  Überlauf: versteckt;
  Position: relativ;
  -webkit-mask-image: -webkit-radial-gradient(weiß, schwarz);
}

2. Spiralförmiger Weihnachtsbaum, nur mit CSS erstellt

Demo-Adresse: http://haiyong.site/christmastree2 (perfekte Reaktion auf Mobilgeräten und PCs)

HTML Code

<div Klasse="Baum">
		  <div Klasse = "tree__light" Stil = "--appear: 0; --y: 0; --rotate: 1440; --radius: 12,5; --speed: 9,235939340131775; --delay: -2,416794939166802;"></div>
		  <div Klasse="tree__light" Stil="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
		  <div Klasse="tree__light" Stil="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
		  <div Klasse="tree__light" Stil="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
		  <div Klasse = "tree__light" Stil = "--appear: 4; --y: 8; --rotate: 1324,8; --radius: 11,5; --speed: 0,702989829906826; --delay: -4,2545348853934435;"></div>
		  <div Klasse="tree__light" Stil="--appear: 5; --y: 10; --rotate: 1296; --radius: 11,25; --speed: 6,842573668088441; --delay: -4,560144802030952;"></div>
		  <div Klasse="tree__light" Stil="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
		  <!-- Die gleiche Regel gilt bis style="--appear: 49; hier aus Gründen der Kürze des Blogs weggelassen-->
		  <div Klasse="tree__light" Stil="--appear: 49; --y: 98; --rotate: 28,8; --radius: 0,25; --speed: 1,7070837859932286; --delay: -3,8515175108122546;"></div>
		  <svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113,32 108,44" style="--delay: 50">
		    <Pfad d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" Füllung="keine" Strichbreite="6.88" Strichlinienkappe="rund" Strichlinienverbindung="rund"></Pfad>
		  </svg>
		</div>

Vollständiger CSS-Code

Einfach kopieren und einfügen

* {
  Box-Größe: Rahmenbox;
}
Körper {
  Hintergrund: #233343;
  Mindesthöhe: 100vh;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Perspektive: 1200px;
  Transformationsstil: 3D bewahren;
}
.Baum {
  Position: relativ;
  Höhe: 50vmin;
  Breite: 25vmin;
  Transformationsstil: 3D bewahren;
  -Webkit-Animation: 2 s unendlich linear drehen;
          Animation: Drehung 2 s unendlich linear;
}
.Baumlicht {
  Transformationsstil: 3D bewahren;
  Position: absolut;
  Höhe: 1vmin;
  Breite: 1vmin;
  Randradius: 50 %;
  -webkit-animation: Flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) unendliche Schritte(4), erscheinen 0,5 s calc(var(--appear) * 0,05 s) beide;
          Animation: Blitz, calc(var(--speed) * 1 s) calc(var(--delay) * 1 s) unendliche Schritte (4), erscheinen 0,5 s, calc(var(--appear) * 0,05 s) beide;
  links: 50%;
  transformieren: verschieben(-50 %, 50 %), drehenY(rechnen(var(--drehen, 0) * 1 Grad)), verschieben3d(0, 0, berechnen(var(--Radius, 0) * 1 vmin));
  unten: calc(var(--y, 0) * 1%);
}
.Baum__Stern {
  Strichstärke: 5vmin;
  Schlaganfall: #f5e0a3;
  Filter: Schlagschatten (0 0 2vmin #fcf1cf);
  Höhe: 5vmin;
  Breite: 5vmin;
  Überlauf: sichtbar !wichtig;
  unten: 100 %;
  links: 50%;
  transformieren: übersetzen(-50 %, 0);
  Position: absolut;
  Strich-Dasharray: 1000 1000;
  Füllung: keine;
  -webkit-animation: Strich 1 s calc((var(--delay) * 0,95) * 0,05 s) beide;
          Animation: Strich 1 s, calc((var(--delay) * 0,95) * 0,05 s), beides;
}
@-webkit-keyframes Strich {
  aus {
    Strich-Dashoffset: -1000;
  }
}
@keyframes Strich {
  aus {
    Strich-Dashoffset: -1000;
  }
}
@-webkit-keyframes drehen {
  Zu {
    transformieren: Y-Drehung (360 Grad);
  }
}
@keyframes drehen {
  Zu {
    transformieren: Y-Drehung (360 Grad);
  }
}
@-webkit-keyframes erscheinen {
  aus {
    Deckkraft: 0;
  }
}
@keyframes erscheinen {
  aus {
    Deckkraft: 0;
  }
}
@-webkit-keyframes flash {
  0 %, 100 % {
    Hintergrund: #f00;
  }
  20% {
    Hintergrund: #fff;
  }
  40 % {
    Hintergrund: #f00;
  }
  60 % {
    Hintergrund: #fff;
  }
  80 % {
    Hintergrund: #f00;
  }
}
@keyframes blinken {
  0 %, 100 % {
    Hintergrund: #f00;
  }
  20% {
    Hintergrund: #fff;
  }
  40 % {
    Hintergrund: #f00;
  }
  60 % {
    Hintergrund: #fff;
  }
  80 % {
    Hintergrund: #f00;
  }
}

3. Weihnachtsbaum erstellt mit HTML+CSS+JS

Demo-Adresse: http://haiyong.site/christmastree3 (Vorschau auf dem PC ist am besten)

Vollständiges CSS

Körper {
  Hintergrundfarbe: #151522;
  Überlauf: versteckt;
    Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert; 
}

Körper,
html {
  Höhe: 100%;
  Breite: 100 %;
  Rand: 0;
  Polsterung: 0;
}


svg{
  Breite: 90 %;
  Höhe: 90 %;
  Sichtbarkeit: versteckt;
 
}

Teilweises JS

MorphSVGPlugin.convertToPath('Polygon');
	var xmlns = "http://www.w3.org/2000/svg",
	  xlinkns = "http://www.w3.org/1999/xlink",
	Auswahl = Funktion(en) {
	    gibt document.querySelector(s) zurück;
	  },
	  selectAll = Funktion(en) {
	    gibt document.querySelectorAll(s) zurück;
	  },
	  pContainer = Auswahl('.pContainer'),
	  mainSVG = auswählen('.mainSVG'),
	  Stern = Auswahl('#Stern'),
	  funkeln = auswählen('.sparkeln'),
	  Baum = Auswahl('#Baum'),
	  showParticle = wahr,
	  PartikelFarbArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
	  particleTypeArray = ['#Stern','#Kreis','#Kreuz','#Herz'],
	  PartikelPool = [],
	  Partikelanzahl = 0,
	  Anzahl Partikel = 201
	
	
	gsap.set('svg', {
	  Sichtbarkeit: „sichtbar“
	})
	
	gsap.set(funkeln, {
		transformOrigin:'50% 50%',
		y:-100
	})
	
	let getSVGPoints = (Pfad) => {
		
		lass arr = []
		var rawPath = MotionPathPlugin.getRawPath(Pfad)[0];
		rawPath.forEach((el, value) => {
			let obj = {}
			obj.x = Rohpfad [Wert * 2]
			obj.y = Rohpfad [(Wert * 2) + 1]
			wenn(Wert % 2) {
				arr.push(Objekt)
			}
		})
		Rückflug an;
	}
	let treePath = getSVGPoints('.treePath')	
	var treeBottomPath = getSVGPoints('.treeBottomPath')
	var mainTl = gsap.timeline({Verzögerung:0, Wiederholung:0}), starTl;
	Funktion flimmern(p){
	  gsap.killTweensOf(p, {opacity:true});
	  gsap.vonNach(p, {
	    Deckkraft: 1
	  }, {
			Dauer: 0,07,
	    Deckkraft: Math.random(),
	    wiederholen:-1
	  })
	}
	
	Funktion erstellePartikel() {
	  var i = Anzahl Partikel, p, PartikelTl, Schritt = Anzahl Partikel/Baumpfadlänge, pos;
	  während (--i > -1) {
	    
	    p = Auswahl(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
	    mainSVG.appendChild(p);
	    p.setAttribute('füllen', particleColorArray[i % particleColorArray.length]);
	    p.setAttribute('Klasse', "Partikel");   
	    PartikelPool.push(p);
	    gsap.set(p, {
	                 x:-100, 
	                 y:-100,
	   transformOrigin:'50% 50%'
	                 })
	  }
	
	}
	
	var getScale = gsap.utils.random(0,5, 3, 0,001, true);
	
	Funktion playParticle(p){
	  wenn(!showParticle){return};
	  var p = Partikelpool[Partikelanzahl]
	 gsap.set(p, {
		 x: gsap.getProperty('.pContainer', 'x'),
		 y: gsap.getProperty('.pContainer', 'y'),
		 Maßstab:getScale()
	    }
	    );
	var tl = gsap.timeline();
	  tl.to(p, {
			Dauer: gsap.utils.random(0.61,6),
	      Physik2D:
	        Geschwindigkeit: gsap.utils.random(-23, 23),
	        Winkel:gsap.utils.random(-180, 180),
	        Schwerkraft:gsap.utils.random(-6, 50)
	      },
	      Maßstab: 0,
	      Drehung:gsap.utils.random(-123,360),
	      Leichtigkeit: 'Power1',
	      onStart: flackern,
	      beiStartParams:[p],
	      //wiederholen:-1,
	      bei Wiederholung: (p) => {
	        gsap.set(p, {         
	            Maßstab:getScale()
	        })
	      },
	      bei Wiederholungsparametern: [p]
	
	    });

	  Partikelanzahl++;
	  Partikelanzahl = (Partikelanzahl >=AnzahlPartikel) ? 0 : Partikelanzahl
	  
	}
	
	Funktion drawStar(){
	  
	  starTl = gsap.timeline({onUpdate:playParticle})
	  starTl.to('.pContainer, .sparkle', {
			Dauer: 6,
			Bewegungspfad:
				Pfad: '.treePath',
	      autoRotate: false
			},
	    Leichtigkeit: „linear“
	  })  
	  .to('.pContainer, .sparkle', {
			Dauer: 1,
	    beimStart:Funktion(){showParticle = false},
	    x:treeBottomPath[0].x,
	    y:BaumUntersterPfad[0].y
	  })
	  .to('.pContainer, .sparkle', {
			Dauer: 2,
	    beimStart:Funktion(){showParticle = true},
			Bewegungspfad:
				Pfad: '.treeBottomPath',
	      autoRotate: false
			},
	    Leichtigkeit: „linear“    
	  },'-=0')
	.von('.treeBottomMask', {
			Dauer: 2,
	  drawSVG:'0% 0%',
	  Strich:'#FFF',
	  Leichtigkeit: „linear“
	},'-=2')  
	  
	}
	
	
	Partikel erstellen();
	zeichneStern();
	//ScrubGSAPTimeline(Haupt-Tl)
	
	mainTl.from(['.treePathMask','.treePotMask'],{
		Dauer: 6,
	  drawSVG:'0% 0%',
	  Strich:'#FFF',
		staffeln:
			je Stück: 6
		},
	    Dauer: gsap.utils.wrap([6, 1,2]),
	  Leichtigkeit: „linear“
	})
	.von('.treeStar', {
		Dauer: 3,
	  //skewY:270,
	  MaßstabY:0,
	  MaßstabX:0,15,
	  transformOrigin:'50% 50%',
	  Leichtigkeit: 'elastisch(1,0.5)'
	},'-=4')
	
	 .zu('.sparkle', {
		Dauer: 3,
	    Deckkraft: 0,
	    Leichtigkeit: „rau ({Stärke: 2, Punkte: 100, Vorlage: linear, Verjüngung: beide, zufällig: wahr, Klemme: falsch})“
	  },'-=0')
	  .to('.treeStarOutline', {
		Dauer: 1,
	    Deckkraft: 1,
	    Leichtigkeit: „rau ({Stärke: 2, Punkte: 16, Vorlage: linear, Verjüngung: keine, Zufallsauswahl: wahr, Klemme: falsch})“
	  },'+=1')		
	mainTl.add(starTl, 0)
	gsap.globalTimeline.timeScale(1.5);

4. Weihnachtsbaum mit Sternschnuppe nur mit CSS

Demo-Adresse: http://haiyong.site/christmastree4 (responsive, zur Vorschau auf Mobilgeräten und PCs verfügbar)

HTML Code

<ul>
 <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
<!-- 256 Zeilen werden hier ausgelassen<li></li> -->
</ul>

CSS Code

:Wurzel {
  --Hintergrund: #3C3B3D;
}

Körper {
  Hintergrund: var(--background);
}
Körper ul {
  Polsterung: 0;
}
Körper ul li {
  Listenstil: keiner;
}
Körper ul:nth-child(1) {
  Position: absolut;
  oben: 20vh;
  links: 50%;
  Breite: 1rem;
  Höhe: 1rem;
  Randradius: 100 %;
  transformieren: übersetzen(-50 %, -50 %);
}
Körper ul:nth-child(1) li {
  Position: absolut;
  Breite: 0;
  Höhe: 0;
  Rahmenbreite: 0 0,5rem 1rem 0,5rem;
  Rahmenstil: durchgezogen;
  Rahmenfarbe: transparent;
  Farbe des unteren Rahmens: #FFCE54;
  Transform-Ursprung: 0,5rem 1rem;
}
Körper ul:nth-child(1) li:nth-child(0) {
  transformieren: drehen (0 Grad);
}
Körper ul:nth-child(1) li:nth-child(1) {
  transformieren: drehen (72 Grad);
}
Körper ul:nth-child(1) li:nth-child(2) {
  transformieren: drehen (144 Grad);
}
Körper ul:nth-child(1) li:nth-child(3) {
  transformieren: drehen (216 Grad);
}
Körper ul:nth-child(1) li:nth-child(4) {
  transformieren: drehen (288 Grad);
}
Körper ul:nth-child(2) li {
  Position: absolut;
  oben: 20vh;
  links: 50%;
  Breite: 0,0625rem;
  Höhe: 60vh;
  Transform-Ursprung: 50 % 0 %;
}
Körper ul:nth-child(2) li:nth-child(1) {
  transformieren: drehen(4,9322004015 Grad);
}
body ul:nth-child(2) li:nth-child(1):vorher, body ul:nth-child(2) li:nth-child(1):nachher {
  -Webkit-Animationsverzögerung: -0,015625 s;
          Animationsverzögerung: -0,015625 s;
}
Körper ul:nth-child(2) li:nth-child(2) {
  transformieren: drehen(7,7960629984 Grad);
}
Körper ul:nth-child(2) li:nth-child(2):vor, Körper ul:nth-child(2) li:nth-child(2):nach {
  -Webkit-Animationsverzögerung: -0,03125 s;
          Animationsverzögerung: -0,03125 s;
}
Körper ul:nth-child(2) li:nth-child(3) {
  transformieren: drehen(10,5294548885 Grad);
}
Körper ul:nth-child(2) li:nth-child(3):vor, Körper ul:nth-child(2) li:nth-child(3):nach {
  -Webkit-Animationsverzögerung: -0,046875 s;
          Animationsverzögerung: -0,046875 s;
}
/* ...... */
/* Gleiches Muster, bis zum 256. */
Körper ul:nth-child(2) li:nth-child(256) {
  transformieren: drehen (2 Grad);
}
body ul:nth-child(2) li:nth-child(256):vorher, body ul:nth-child(2) li:nth-child(256):nachher {
  -Webkit-Animationsverzögerung: -4 s;
          Animationsverzögerung: -4s;
}
body ul:nth-child(2) li:vor, body ul:nth-child(2) li:nach {
  Inhalt: "";
  Position: absolut;
  oben: 0%;
  -Webkit-Animation: Fall 4 s linear unendlich;
          Animation: Herbst 4 s linear unendlich;
}
Körper ul:nth-child(2) li:vor {
  Breite: 0,0625rem;
  Höhe: 3rem;
  Hintergrund: linearer Farbverlauf (rgba (46, 204, 113, 0), rgba (46, 204, 113, 0,5));
}
Körper ul:nth-child(2) li:after {
  unten: 0;
  transformieren: übersetzen (-50 %, 3rem);
  Breite: 0,1875rem;
  Höhe: 0,1875rem;
  Randradius: 100 %;
  Hintergrund: #ffce54;
}
Körper ul:nth-child(2) li:nth-child(4n):nach {
  Hintergrund: #D8334A;
}
Körper ul:nth-child(2) li:nth-child(4n+1):nach {
  Hintergrund: #FFCE54;
}
Körper ul:nth-child(2) li:nth-child(4n+2):nach {
  Hintergrund: #2ECC71;
}
Körper ul:nth-child(2) li:nth-child(4n+3):nach {
  Hintergrund: #5D9CEC;
}

@-webkit-keyframes fallen {
  0% {
    Deckkraft: 0;
    oben: 0%;
  }
  5% {
    Deckkraft: 0;
  }
  15 %, 90 % {
    Deckkraft: 1;
  }
  100 % {
    Deckkraft: 0;
    oben: 100 %;
  }
}

@keyframes fallen {
  0% {
    Deckkraft: 0;
    oben: 0%;
  }
  5% {
    Deckkraft: 0;
  }
  15 %, 90 % {
    Deckkraft: 1;
  }
  100 % {
    Deckkraft: 0;
    oben: 100 %;
  }
}

5. Weihnachtsbaum in der Kristallkugel

Demo-Adresse: http://haiyong.site/christmastree5 (responsive, zur Vorschau auf Mobilgeräten und PCs verfügbar)

Vollständiger CSS-Code

html, Text {
    Rand: 0;
    Breite: 100 %;
    Höhe: 100%;
    Position: absolut;
    Überlauf: versteckt;
    Hintergrund: linearer Farbverlauf (135 Grad, RGBA (180,186,214,1) 0 %, RGBA (232,203,192,1) 100 %);
}

.Inhalt {
    Textausrichtung: zentriert;
    Breite: 100 %;
}

svg {
    maximale Breite: 575px;
}

#Leinwand {
    Randradius: 50 %;
    Position: relativ;
    Breite: 310px;
    Höhe: 290px;
    oben: 10px;
    links: 0px;
}

.canvas_container {
    Position: absolut;
    Breite: 100 %;
}

.draw_container {
    Position: absolut;
    oben: 50px;
    Breite: 100 %;
}

Vollständiger JS-Code

$(Funktion() {
		    var Leinwand = $("#Leinwand")[0];
		    var ctx = canvas.getContext("2d");
		    Variable BREITE = 320;
		    var HÖHE = 320;
		    canvas.width = BREITE;
		    canvas.height = HÖHE;
		    klarCanvas();
		
		    var Partikel = [];
		    für (var i = 0; i < BREITE; i++) {
		        Partikel.push({
		            x: Math.random() * BREITE,
		            y: Math.random() * HÖHE,
		            r: Math.random() * 2 + 1
		        })
		    }
		    
		    Funktion zeichnen() {
		        klarCanvas();
		        ctx.fillStyle = "rgba(255, 255, 255, 0,6)";
		        ctx.beginPath();
		
		        für (lass i = 0; i < BREITE; i++) {
		            sei p = Teilchen[i];
		            ctx.moveTo(px, py);
		            ctx.arc(px, py, pr, 0, Math.PI * 2, true);
		        }
		        ctx.fill();
		        aktualisieren();
		    }
		    
		    Funktion update() {
		        für (lass i = 0; i < BREITE; i++) {
		            sei p = Teilchen[i];
		            py += pr;
		            wenn (py > canvas.height) {
		                Partikel[i] = {
		                    x: Math.random() * Leinwand.Breite,
		                    y: -10,
		                    r:pr
		                };
		            }
		        }
		    }
		    var Timer = setzeInterval(draw, 50);
		
		    Funktion clearCanvas() {
		        ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
		    }
		
		})

6. Weihnachtskarten

Demo-Adresse: http://haiyong.site/shengdanheka

Oben finden Sie den detaillierten Inhalt des dynamischen Weihnachtsbaums, der über JavaScript implementiert wurde. Weitere Informationen zum JavaScript-Weihnachtsbaum finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Implementierung von Weihnachtsbaumcode basierend auf JS2Image
  • JavaScript-Implementierungscode für blinkende Weihnachtsbäume
  • Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

<<:  HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets

>>:  Ein Artikel zum Verständnis der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Artikel empfehlen

Ein tiefer Einblick in JavaScript-Promises

Inhaltsverzeichnis 1. Was ist Promise? 2. Warum g...

JavaScript zum Erzielen eines einfachen Drag-Effekts

In diesem Artikel wird der spezifische JavaScript...

Eine kurze Diskussion über HTML-geordnete Listen, ungeordnete Listen und Definitionslisten

Sortierte Liste XML/HTML-CodeInhalt in die Zwisch...

Detaillierte Beschreibung der Unicode-Signatur-BOM

Unicode-Signatur-BOM – Was ist die BOM? BOM ist di...

Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung

Hier habe ich hauptsächlich einige häufig verwend...

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Das mit CLI3 erstellte Vue-Projekt wird als Nullk...

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

MySQL 5.7 und höhere Versionen ermöglichen die di...

HTML implementiert ein schreibgeschütztes Textfeld und kann den Inhalt nicht ändern

Ohne weitere Umschweife werde ich den Code direkt...

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

Inhaltsverzeichnis So starten Sie mysqld Methode ...

Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden

Indem wir den aktuellen Bildlaufversatz zu den At...

Zusammenfassung der Verwendung von Linux-SFTP-Befehlen

sftp ist die Abkürzung für Secure File Transfer P...

VMware 15.5-Version des grafischen Tutorials zum Erstellen eines Yum-Warehouses durch Mounten der System-CD

1. Öffnen Sie die virtuelle CentOS 7-Maschine. 2....

Detailliertes Beispiel für die Verkettung mehrerer Felder in MySQL

Das Zusammenführen von Zeilen- und Feldergebnisse...

Implementierung der ELK-Bereitstellungsmethode mit einem Klick in Docker Compose

Installieren Filebeat hat Logstash-Forwarder voll...

25 Beispiele für Website-Design im Nachrichtenstil

bmi Voyager Heugabel Ulster Lebensmittelhändler F...