CSS und JS realisieren romantische Meteorschauer-Animationen

Der Inhalt dieses Artikels befasst sich mit der Realisierung romantischer Meteorschaueranimationen mit CSS und JS. Ich hoffe, dass er für Sie hilfreich ist. Der Effekt ist wie folgt:

HTML

Da es viele Knoten gibt und ich es so realistisch und interessant wie möglich machen möchte, habe ich auch hinzugefügt zufällige Positionen zu den Knoten. Daher wird die Ausgabe von Knoten von JS gesteuert. Auf der HTML-Seite werden nur wenige übergeordnete Elementfelder sowie die entsprechenden ID-Namen und Klassennamen geschrieben, und die Struktur ist relativ einfach.

CSS

Der schwierige Teil des CSS-Teils ist der Stil des Meteors und das Zeichnen der Wolken mit Kreisen sowie das anschließende Stapeln der Wolken, um einen dreidimensionalen Effekt zu erzeugen. [Empfohlene Lektüre: Was ist CSS-Stacking-Kontext? Was macht es? ]

Lassen Sie uns zunächst über den Stil des Meteors sprechen:

#sky  .star {      position：absolute;
     不透明度：0 ;
     z-index：10000 ;
 }
 
 .star :: after {      content：“” ;
     显示：块;
     边界：坚固;     border-width：2px  0  2px  80px ;
     / *流星随长度逐渐缩小* / 
     border-color：透明透明透明rgba（255,255,255,1）;     border-radius：2px  0  0  2px ;     transform：rotate（-45deg）;     transform-origin：0  0  0 ;
     盒子阴影：0  0  20px  rgba（255,255,255，.3）;
 }

extrahierte zuerst den öffentlichen Stil und fügte das Positionierungsattribut hinzu; Dann übergeben Sie den Pseudo-Nachher-Stern. Fügen Sie der Klasse einen Meteor hinzu und zeichnen Sie ihn mit Randeigenschaften:

1) Modellzeichnung: Die Reihenfolge der Randbreite ist oben, rechts, unten, links. Ebenso die Reihenfolge von border-color ist auch oben, rechts, unten, links. Auf diese Weise können Sie nach einer Eins-zu-eins-Entsprechung zwischen Randbreite und Randfarbe sehen, dass 2 Pixel die Breite des Meteors, 80 Pixel die Länge des Meteors und der 0-Pixel-Meteor der Schweif ist. so entsteht ein. Meteormodell mit Kopf 2 Pixel breit, Schwanz 0 Pixel und Länge 80 Pixel

2) Etwas realistisch: nach Randradius? Fügen Sie dem Kopf des Meteors eine abgerundete Ecke hinzu, damit er realistischer aussieht. Drehen Sie ihn schließlich in einem Winkel, damit er aussieht, als würde er fallen.

3) Fügen Sie Glanz hinzu: Fügen Sie einen Kastenschatten hinzu Fügen Sie dem Meteor einen kleinen Heiligenschein hinzu, damit er funkelnd aussieht;

Nach den oben genannten 3 Schritten ist eine Sternschnuppe fertig.

Dann zeichnen Sie Wolken:

Da der Wolkencode relativ lang ist, werde ich ihn hier nicht veröffentlichen. Die Methode besteht lediglich darin, Kreise einzeln zu überlappen und abzudecken, um die Form zu vervollständigen eine Wolke.

Nachdem Sie eine Wolkenebene fertiggestellt haben, kopieren Sie eine und verwenden Sie dann mehrere Wolkenebenen, um einen dreidimensionalen Effekt aus Verblassen und Überlappen zu erzeugen.

JS

Der JS-Teil beginnt mit Meteor und gibt ein Beispiel:

setInterval（function（） {
     const obj = addChild（“#sky”，“div”，2，“star”）; //插入流星
    for（let i = 0 ; i <obj.children.length; i ++）{         //随机位置
        const top = -50 + Math .random（）* 200 + “px”，
            left = 200 + Math .random（）* 1200 + “px”，
            scale = 0.3 + Math .random（）* 0.5 ;
        const timer = 1000 + Math .random（）* 1000 ;
        obj.children [i] .style.top = top;
        obj.children [i] .style.left = left;
        obj.children [i] .style.transform = `scale（$ {scale}）` ;        
        //添加动画
        requestAnimation（{
            ele：obj.children [i]，
             attr：[ “top”，“left”，“opacity” ]，
             值：[ 150，-150，.8 ]，
             time：timer，
             flag：false，
             fn：function（） {
                requestAnimation（{
                    ELE：obj.children [I]，
                     ATTR：“顶”，“左”，“不透明” ]，
                     值：[ 150，-150，0 ]，
                     时间：定时器，
                     标志：假，
                     FN：（） => {
                        obj.parent.removeChild（obj.children [I]）; //动画结束删除节点
                    }
                }）
            }
        }）;
    }
}，1000）;

Ich verwende hier zwei von mir selbst gekapselte Methoden, eine ist requestAnimation basierend auf requestAnimationFrame und addChild basierend auf appendChild.

Um den Effekt zufälliger Sternpositionen zu erzielen, werden Meteore kontinuierlich über das eingestellte Intervall des Timers eingefügt und gelöscht:

Fügen Sie zunächst jedes Mal 2 Meteore zur Seite hinzu, aber das Intervall des Timers kleiner als die Animationszeit des Meteors, dadurch wird sichergestellt, dass die Anzahl der Meteore auf der Seite kein fester Wert ist, sondern größer als 2 sein muss. Andernfalls sind 2 Meteore gleichzeitig etwas verlassen.

Geben Sie dann jedem neu hinzugefügten Meteor auf der Seite eine zufällige Position (oben, links), eine zufällige Größe (Skalierung) und eine zufällige Animationsausführungszeit (Timer). );

Schließlich fügen Sie in der Schleife jedem neu zur Seite hinzugefügten Meteor eine Animation hinzu und löschen den Knoten, nachdem die Animation über die Rückruffunktion ausgeführt wurde. Hierbei ist zu beachten, dass die Animation in zwei Phasen unterteilt ist (Erscheinen und Verschwinden, hauptsächlich Steuerung der Deckkraft). Außerdem bewegt sich bei meiner Verarbeitung hier jeder Meteor um die gleiche Distanz von 300 Pixeln. Ich denke, diese Distanz kann auch durch Zufallszahlen gesteuert werden, aber ich war faul und habe es nicht getan.

Angehängter Code:

HTML:

< body > 
    < div  class = “container” > 
        < div  id = “mask” > </ div > 
        < div  id = “sky” > </ div > 
        < div  id = “moon” > </ div > 
        < div  id = “stars” > </ div > 
        < div  class = “cloud cloud-1” ></ div > 
        <div  class = “cloud cloud-2” > </ div > 
        < div  class = “cloud cloud-3” > </ div > 
    </ div > 
</ body >

css:

/*  -  -  -  -  -  - 重启 -  -  -  -  -  -  */
 
 * {
     保证金：0 ;
     填充：0 ;
 }
 
 html，
  body {      width：100％ ;
     最小宽度：1000px ;
     身高：100％ ;
     最小高度：400px ;
     溢出：隐藏;
 }
 / * ------------画布------------ * / 
 .container {      position：relative;
     身高：100％ ;
 }
 / *遮罩层* /
 
 #mask {      position：absolute;
     宽度：100％ ;
     身高：100％ ;     background：rgba（0,0,0，.8）;
     z-index：900 ;
 }
 / *天空背景* /
 
 #sky {      width：100％ ;
     身高：100％ ;     background：线性渐变（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
 }
 / *月亮* /
 
 #moon {      position：absolute;
     上：50px ;
     右：200px ;
     宽度：120px ;
     身高：120px ;
     背景：rgba（251,255,25,0.938）;     border-radius：50％ ;     box-shadow：0  0  20px  rgba（251,255,25,0.5）;
     z-index：9999 ;
 }
 / *闪烁星星* /
 
 .blink {      position：absolute;     background：rgb（255,255,255）;     border-radius：50％ ;     box-shadow：0  0  5px  rgb（255,255,255）;
     不透明度：0 ;
     z-index：10000 ;
 }
 / *流星* /
 
 .star {      position：absolute;
     不透明度：0 ;
     z-index：10000 ;
 }
 
 .star :: after {      content：“” ;
     显示：块;
     边界：坚固;     border-width：2px  0  2px  80px ;
     / *流星随长度逐渐缩小* / 
     border-color：透明透明透明rgba（255,255,255,1）;     border-radius：2px  0  0  2px ;     transform：rotate（-45deg）;     transform-origin：0  0  0 ;
     盒子阴影：0  0  20px  rgba（255,255,255，.3）;
 }
 / *云* /
 
 .cloud {      position：absolute;
     宽度：100％ ;
     身高：100px ;
 }
 
 .cloud-1 {
      bottom： - 100px ;
     z-index：1000 ;
     不透明度：1 ;
     变换：规模（1.5）;
     -webkit-transform：scale（1.5）;
     -moz-transform：scale（1.5）;
     -ms-transform：scale（1.5）;
     -o-transform：scale（1.5）;
 }
 
 .cloud-2 {
      left： - 100px ;
     底部： - 50px ;
     z-index：999 ;
     不透明度：。5 ;
     变换：旋转（7deg）;
     -webkit-transform：rotate（7deg）;
     -moz-transform：rotate（7deg）;
     -ms-transform：rotate（7deg）;
     -o-transform：rotate（7deg）;
 }
 
 .cloud-3 {
      left：120px ;
     底部： - 50px ;
     z-index：999 ;
     不透明度：。1 ;     transform：rotate（-10deg）;
     -webkit-transform：rotate（-10deg）;
     -moz-transform：rotate（-10deg）;
     -ms-transform：rotate（-10deg）;
     -o-transform：rotate（-10deg）;
 }
 
 .circle {      position：absolute;     border-radius：50％ ;
     背景：#fff ;
 }
 
 .circle-1 {      width：100px ;
     身高：100px ;
     上： - 50px ;
     左：10px ;
 }
 
 .circle-2 {      width：150px ;
     身高：150px ;
     上： - 50px ;
     左：30px ;
 }
 
 .circle-3 {      width：300px ;
     身高：300px ;
     上： - 100px ;
     左：80px ;
 }
 
 .circle-4 {      width：200px ;
     身高：200px ;
     上： - 60px ;
     左：300px ;
 }
 
 .circle-5 {      width：80px ;
     身高：80px ;
     上： - 30px ;
     左：450px ;
 }
 
 .circle-6 {      width：200px ;
     身高：200px ;
     上： - 50px ;
     左：500px ;
 }
 
 .circle-7 {      width：100px ;
     身高：100px ;
     上： - 10px ;
     左：650px ;
 }
 
 .circle-8 {      width：50px ;
     身高：50px ;
     上：30px ;
     左：730px ;
 }
 
 .circle-9 {      width：100px ;
     身高：100px ;
     上：30px ;
     左：750px ;
 }
 
 .circle-10 {      width：150px ;
     身高：150px ;
     上：10px ;
     左：800px ;
 }
 
 .circle-11 {      width：150px ;
     身高：150px ;
     上： - 30px ;
     左：850px ;
 }
 
 .circle-12 {      width：250px ;
     身高：250px ;
     上： - 50px ;
     左：900px ;
 }
 
 .circle-13 {      width：200px ;
     身高：200px ;
     上： - 40px ;
     左：1000px ;
 }
 
 .circle-14 {      width：300px ;
     身高：300px ;
     上： - 70px ;
     左：1100px ;

JS:

//流星动画 
setInterval（function（） {
     const obj = addChild（“#sky”，“div”，2，“star”）;    for（let i = 0 ; i <obj.children.length; i ++）{
         const top = -50 + Math .random（）* 200 + “px”，
            left = 200 + Math .random（）* 1200 + “px”，            scale = 0.3 + Math .random（）* 0.5 ;
        const timer = 1000 + Math .random（）* 1000 ;
        obj.children [i] .style.top = top;
        obj.children [i] .style.left = left;
        obj.children [i] .style.transform = `scale（$ {scale}）` ;
        requestAnimation（{
            ele：obj.children [i]，
             attr：[ “top”，“left”，“opacity” ]，
             值：[ 150，-150，.8 ]，             time：timer，
             flag：false，
             fn：function（） {
                requestAnimation（{
                    ELE：obj.children [I]，
                     ATTR：“顶”，“左”，“不透明” ]，
                     值：[ 150，-150，0 ]，
                     时间：定时器，
                     标志：假，
                     FN：（） => {
                        obj.parent.removeChild（obj.children [I]）;
                    }
                }）
            }
        }）;
    }
}，1000）;
//闪烁星星动画 
setInterval（function（） {
     const obj = addChild（“#stars”，“div”，2，“blink”）;    for（let i = 0 ; i <obj.children.length; i ++）{
         const top = -50 + Math .random（）* 500 + “px”，
            left = 200 + Math .random（）* 1200 + “px”，            round = 1 + Math .random（）* 2 + “px” ;
        const timer = 1000 + Math .random（）* 4000 ;
        obj.children [i] .style.top = top;
        obj.children [i] .style.left = left;
        obj.children [i] .style.width = round;
        obj.children [i] .style.height = round;
        requestAnimation（{
            ele：obj.children [i]，
             attr：“opacity”，
             值：.5，             time：timer，
             flag：false，
             fn：function（） {
                requestAnimation（{
                    ele：obj.children [i]，
                     attr：“opacity”，
                     value：0，                     time：timer，
                     flag：false，
                     fn：function（） {
                        obj.parent.removeChild（obj.children [I]）;
                    }
                }）;
            }
        }）;
    }
}，1000）;
//月亮移动
requestAnimation（{
    ele：“＃moon”，
     attr：“right”，
     值：1200，
     时间：10000000，
}）;
//添加云
const clouds = addChild（“。cloud”，“div”，14，“circle”，true）;for（let i = 0 ; i <clouds.children.length; i ++）{     for（let j = 0 ; j <clouds.children [i] .length;）{
        clouds.children [i] [j] .classList.add（`circle- $ {++ j} `）;
    }
}
//云动画let flag = 1 ;
的setInterval（
    功能（） {
         const clouds = document .querySelectorAll（“。cloud”）;
        const left = Math .random（）* 5 ;
        bottom = Math .random（）* 5 ;        let timer = 0 ;        for（let i = 0 ; i <clouds.length; i ++）{
            requestAnimation（{
                ele：clouds [i]，
                 attr：[ “left”，“bottom” ]，
                 value：flag％2？[-left，-bottom]：[left，bottom]，                 time：timer + = 500，
                 flag：false，
                 fn：function（） {
                    requestAnimation（{
                        ele：clouds [i]，
                         attr：[ “left”，“bottom” ]，
                         value：flag％2？[left，bottom]：[ -  left，-bottom]，                         time：timer，
                         flag：false
                    }）
                }
            }）;
        }
        标志++;
    }，2000）

Das Obige ist die Implementierung von CSS und JS Eine vollständige Einführung in die romantische Meteorschauer-Animation. Wenn Sie mehr über das

CSS-Tutorial

erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonCSS und JS realisieren romantische Meteorschauer-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!