ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 フォントで炎の効果を実装する手順

CSS3 フォントで炎の効果を実装する手順

php中世界最好的语言オリジナル: 2017-11-30 11:38:282043ブラウズ

CSS3 で多くのクールなアニメーション効果を作成できることはわかっています。そこで、今日のチュートリアルでは、CSS3 フォントスタイルを使用してリアルな炎の特殊効果テキストを作成する方法を見てみましょう。

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>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。