Maison >interface Web >tutoriel CSS >Étapes pour implémenter l'effet de flamme dans les polices CSS3
Étapes pour implémenter l'effet de flamme dans les polices CSS3
- php中世界最好的语言original
- 2017-11-30 11:38:282078parcourir
Nous savons que CSS3 peut créer de nombreux effets d'animation sympas, le didacticiel d'aujourd'hui explique donc comment utiliser les styles de police CSS3 pour créer un texte d'effet spécial de flamme réaliste.
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>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Tutoriel pour rendre la largeur div adaptative
La relation entre le rendu de la page Web et DIV+CSS
Expérience de développement utilisant des balises h dans des pages Web
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!