Heim >Web-Frontend >CSS-Tutorial >Schritte zum Implementieren des Flammeneffekts in CSS3-Schriftarten
Schritte zum Implementieren des Flammeneffekts in CSS3-Schriftarten
- php中世界最好的语言Original
- 2017-11-30 11:38:282043Durchsuche
Wir wissen, dass CSS3 viele coole Animationseffekte erzeugen kann. Im heutigen Tutorial erfahren Sie, wie Sie mithilfe von CSS3-Schriftstilen realistischen Flammen-Spezialeffekttext erstellen.
html：
<body>
<p>火火火火</p>
</body>
css：
<style>
body{ font-size:120px; font-family:'微软雅黑'; background:#000; color:#fff;}
@-webkit-keyframes test{
0%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
}
30%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;
}
60%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;
}
100%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
}
}
p{font-weight:bold; color:#fff;
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
animation:1s test linear infinite;
}
</style>Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Tutorial zum Anpassen der Div-Breite
Die Beziehung zwischen der Darstellung der Webseite und DIV+CSS
Entwicklungserfahrung mit H-Tags in Webseiten
Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren des Flammeneffekts in CSS3-Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!