Étapes pour implémenter l'effet de flamme dans les polices CSS3-tutoriel CSS-php.cn

Étapes pour implémenter l'effet de flamme dans les polices CSS3

php中世界最好的语言

Libérer： 2017-11-30 11:38:28

original

1971 Les gens l'ont consulté

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:&#39;微软雅黑&#39;; 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>

Copier après la connexion

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!