Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um den Effekt heller animierter Flammen zu zeichnen

Verwenden Sie CSS3, um den Effekt heller animierter Flammen zu zeichnen

不言Original: 2018-06-20 15:48:521755Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen von reinem CSS3 vor, um den Flammeneffekt einer leichteren Animation im Detail zu zeichnen. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit anderen geteilt Der spezifische Code zum Zeichnen leichterer Animationsflammeneffekte mit reinem CSS3 dient als Referenz. Der spezifische Inhalt lautet wie folgt:

<span style="font-family:Comic Sans MS;">animation(webkit-animation),   
@keyframes name (@-webkit-keyframes name),   
transform,   
transform-origin,   
transition,   
box-shadow（spread属性）,   
text-shadow   
z-index   
linear-gradient。   
radial-gradient   
background-image    
</span>

Zuallererst der HTML-Code Der Code lautet wie folgt:

 <span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>纯CSS绘制打火机动画火焰特效</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body class="keBody">
  <h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
  <p class="kePublic">
   <p class="playground">
    <p class="flame"></p>
    <p class="lighterBody">
     <p class="hover">hover me</p>
    </p>
    <p class="lid"></p>
   </p>
   <p class="clear"></p>
  </p>
 </body>
</html></span>

Stil Die CSS-Datei lautet wie folgt:

<span style="font-family:Comic Sans MS;">@charset "utf-8";   
body{   
 margin:0;   
 padding:0;   
 color:#333;   
 text-align:center;   
 font:12px "微软雅黑";   
}   
:before,:after{   
 position:absolute;   
 content:"";   
}   
.keBody{   
 background:url(../images/bodyBg.jpg) repeat #333;   
}   
.keTitle{   
 height:100px;   
 line-height:100px;   
 font-size:30px;   
 font-family:&#39;微软雅黑&#39;;   
 color:#fff;   
 text-align:center;   
 background:url(../images/bodyBg3.jpg) repeat-x bottombottom left;   
 font-weight:normal;   
 margin-bottom:0;   
}   
.kePublic{   
 background:#cccccc;   
 padding:50px;   
}   
.playground{   
 position:relative;   
 width:140px;   
 height:400px;   
 left:50%;   
 margin-left:-70px;   
}   
.flame{   
   opacity: 0;   
   position: absolute;   
   bottombottom: 60%;   
   left: 42%;   
   width: 14px;   
   height: 70px;   
   background-color: white;   
   border-radius: 100% 100% 0 0;   
   box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9,  10px -10px 30px #feec85,  -20px -20px 40px #ffae34,  20px -40px 50px #ec760c,  -20px -60px 60px #cd4606,  0 -80px 70px #973716,  10px -90px 80px #451b0e;   
}   
.playground:hover .flame {   
 opacity:1;   
 transition:opacity 3s linear;   
 -webkit-animation:flame 1s infinite linear;   
}   
.playground:hover .lid{   
 -webkit-animation:lidoff 1s linear;   
 /*把物体动画地从一个地方移动到另一个地方，并让它停留在那里：*/
 -webkit-animation-fill-mode:forwards;   
}   
.lighterBody{   
 position:absolute;   
 width:140px;   
 height:130px;   
 top:200px;   
 left:0;   
 background-image:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,   
     #4e4e4e 76%,#383838 87%,#1b1b1b 100%);   
 border-radius:2% 2% 8% 8%;   
 box-shadow:inset 0 0 5px 5px #333;   
}   
.lighterBody:before{   
 width:47px;   
 height:47px;   
 top:-50px;   
 left: 42px;   
 content:"...";   
 color:#e6e6e6;   
 border-radius:6% 6% 0 0;   
 background-image:linear-gradient(to rightright,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);   
 font-size:30px;   
 font-weight:bold;   
 letter-spacing:7px;   
 line-height:16px;   
 text-shadow:0 0 5px black;   
 padding-top:3px;   
 padding-left:4px;   
}   
.lighterBody:after{   
 width:33px;   
 height:33px;   
 background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);   
 border-radius:100%;   
 top:-33px;   
 left:10px;   
 box-shadow:inset 0 0 1px 2px gray;   
}   
.lid{   
 z-index:2;   
 position:absolute;   
 width:140px;   
 height:75px;   
 top:125px;   
 left:0;   
 background:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:8% 8% 2% 2%;   
 box-shadow:inset 0 0 5px 5px #333;   
 /*border-bottom:3px solid #f2f2f2;*/
}   
.lid:before{   
 width:10px;   
 height:10px;   
 top:70px;   
 left:133px;   
 background-image:radial-gradient(ellipse at center, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:100%;   
}   
.hover{   
 z-index:1;   
 text-align:center;   
 margin-top:30%;   
 color:rgba(255,255,255,0.9);   
 text-shadow:0 1px 1px rgba(0,0,0,0.8);   
 font: 20px "微软雅黑";   
}   
.hover:before{   
 content:"";   
 z-index:1;   
 width:0;   
 height:0;   
 top:-50px;   
 left:20px;   
 border-bottom:35px solid #f2f2f2;   
 /*border-left:10px solid transparent;*/
}   
@-webkit-keyframes flame{   
 0%{   
  height:70px;   
  transform:skewY(0deg);   
  border-radius:100% 100% 0 0;   
 }   
 25%{   
  height:60px;   
  transform:skewY(40deg);   
  border-radius:10% 100% 0 0;   
 }   
 60%{   
  height:65px;   
  transform:skewY(-20deg);   
  border-radius:90% 10% 0 0;   
 }   
 70%{   
  height:50px;   
  transform:skewY(10deg);   
  border-radius:10% 100% 0 0;   
 }   
 100%{   
  height:70px;   
  tranform:skewY(0deg);   
 }   
}   
@-webkit-keyframes lidoff{   
 from{   
  transform:rotate(0deg);   
  transform-origin:100% 100%;   
 }   
 to{   
  transform:rotate(130deg);   
  transform-origin:100% 100%;   
 }   
}</span>

Anfangsfoto:

Dynamisches Foto

Der Hauptanimationseffekt Es gibt zwei Situationen: Der eine ist die Situation, in der der Feuerzeugdeckel geöffnet wird, wenn die Maus über „hover me“ schwebt, was durch den folgenden Animationscode realisiert wird :

 <span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{     注意这里要加上-webkit-   
     from{   
          transform:rotate(0deg);   
          transform-origin:100% 100%;   
     }   
     to{   
          transform:rotate(130deg);   
          transform-origin:100% 100%;   
     }   
}    
</span>

Die zweite Animation ist die Realisierung des Kerzenlichteffekts: Die Kerze wird durch die Variable realisiert durch transit:opacity 3s linear

Der Effekt des im Wind schwingenden Kerzenlichts ist erreicht durch den folgenden Code:

<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{   
    from{   
         transform:rotate(0deg);   
         transform-origin:100% 100%;   
    }   
    to{   
         transform:rotate(130deg);   
         transform-origin:100% 100%;   
    }   
</span>

Der Effekt der Trennung der leichteren Abdeckung vom Rumpf wird erreicht durch: box -shadow:inset 0 0 5px 5px #333; Wird hier hauptsächlich durch inset implementiert (achten Sie darauf, nicht zu schreiben einfügen).

Die runde Kugel und das kleine weiße Quadrat, die beim Einschalten des Feuerzeugs erscheinen, sind die Effekte, die durch :after :before in Kombination mit Z-Index erzielt werden.

Im Folgenden werden einige Attribute vorgestellt, die ich durch dieses Beispiel gelernt habe und auf die ich achten muss.

transform-origin: Die Standardanfangsposition ist die Mitte des Bildes, 100 % entspricht 100 % rechts unten, 0 % entspricht links oben.

before and :after : Der eingefügte Inhalt ist ein Unterelement des zugehörigen Zielelements, wird jedoch „vor“ allen Inhalten platziert dieses Elements oder „nachher“. Der eingefügte Inhalt ist im Quellcode der Seite unsichtbar und nur im CSS zu sehen. Gleichzeitig eingefügte Elemente sind standardmäßig Inline-Elemente. Um dem eingefügten Element Höhe, Abstand, Ränder usw. zu geben, muss daher normalerweise ein Element auf Blockebene explizit definiert werden (display:block). Obwohl kein Inhalt eingefügt werden darf, muss der Inhalt geschrieben werden. Wenn kein Inhalt eingefügt wird, wird der Inhalt als Inhalt geschrieben:"";

IE6 und IE7 sind nicht kompatibel mit diese beiden Für das Element

Pseudoelement (doppelter Doppelpunkt) ist die Pseudoklasse in CSS3 (einzelner Doppelpunkt)

Gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn es eine Verzögerung gibt, bevor die Animation beginnt). spielen).

Hintergrundbild: löst das Problem, dass p nur einen Hintergrund festlegen kann, sodass ein p mehrere Hintergrundbilder festlegen kann. Box-Shadow: Ein oft vergessener Parameter – Spread (erweiterter Schattenradius). Dieser früher vergessene Parameter verändert die Größe des Schattens – sein Wert kann positiv oder negativ sein Die Schatten werden verlängert und vergrößert, andernfalls werden sie verkleinert, wenn sie negativ sind. Mit diesem Parameter können Sie Box-Shadow verwenden, um einen einseitigen Schatteneffekt wie eine Schattenarbeit in Photoshop zu erzeugen. Hierbei ist zu beachten, dass dieser erweiterte Schattenwert in Verbindung mit dem Schattenunschärferadius verwendet werden muss. Die allgemeine Situation ist, dass „der erweiterte Schattenradius im Allgemeinen gleich dem Unschärferadius und seinen negativen Werten eingestellt ist.“ werden entfernt.“
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden von CSS3 zum Erstellen eines Codes für den Flügelschlag eines Schmetterlings

Verwenden von CSS3 zum Erzielen eines Ballonstils Wirkung

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um den Effekt heller animierter Flammen zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3 html display 伪类伪元素 background transform transition animation photoshop

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：Über die Analyse von CSS3 rem (Festlegen der Schriftgröße)Nächster Artikel：Über die Analyse von CSS3 rem (Festlegen der Schriftgröße)

In Verbindung stehende Artikel

Mehr sehen