Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)-tutoriel CSS-php.cn

Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

奋力向前

Libérer： 2021-08-20 17:13:08

original

3181 Les gens l'ont consulté

Dans l'article précédent "Une astuce pour vous apprendre à utiliser le HTML pour ajouter des effets de bordure aux images (explication détaillée du code)", je vous ai présenté comment utiliser le HTML pour ajouter des effets de bordure aux images. L'article suivant vous présentera comment utiliser CSS pour ajouter un effet de flamme au texte. Voyons comment le faire ensemble.

Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

Ouvrez le logiciel de code HTML et créez un code

1 Voici une balise p, et ensuite nous pourrons simplement en écrire quelques-unes, rire quand nous sommes heureux, dormir quand nous sommes heureux. sommes fatigués et réveillons-nous quand nous sommes fatigués. Souriez simplement, exemple de code. p标签，然后咱就随便写几个，开心就笑，累了就睡觉，醒了就微笑，代码示例。

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>开心就笑，累了就睡觉，醒了就微笑</p>
</body>
</html>

Copier après la connexion

代码效果

代码效果出来了，发现是一个非常标准的一个字体对吧，我想把这个字体变成斜体，那这个东西怎么做呢，来咱们看着。

2、实际上来说有一个样式能帮助到我们叫做font-style，这里边有一个东西叫做italic，这个东西能直接帮助咱们把这个文字变成斜体，代码示例。

<style type="text/css">
    p{font-style: italic;}
 
</style>

Copier après la connexion

代码效果

Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

代码效果出来了，发现这文字还真的倾斜，这就是一个文字的一个斜体，它还有一个其他的一个方式叫做oblique这两种方式都能让这个文字变成倾斜，但是它们两个看着像是都一样，来咱们可以看一眼，代码示例。

p{font-style: oblique;}

Copier après la connexion

代码效果

Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

代码效果出来了，感觉跟刚才那个差不多对吧，不过我想要做火焰效果，那怎么做？

3、将【倾斜】标签先删除，然后在head标签之间加入<style type="text/css"></style>这串代码然后在style标签中输入文本的水平对齐方式、字体、颜色、阴影，代码示例。

p{
text-align:center;
font:bold 60px Arial, Helvetica, sans-serif;
color: red;
text-shadow: 0 0 4px white,
2px -5px 4px #ff3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}

Copier après la connexion

代码效果

Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

4、为了增强火焰效果，这里把背景颜色设置成黑色，在style

body{background-color:#000;}

Copier après la connexion

Effet de code

L'effet de code est sorti, et j'ai trouvé que c'est une police très standard, n'est-ce pas ? Je veux transformer cette police en italique, alors comment faire ? ? Venez et regardons. Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

2. En fait, il existe un style qui peut nous aider appelé font-style, qui peut directement nous aider à convertir ce texte en italique. exemple de code.

rrreeeEffet de code

WeChat capture d'écran_20210820155656 .jpg

🎜🎜L'effet de code est sorti et j'ai trouvé que le texte est vraiment incliné. Il s'agit d'un texte en italique. Il a également une autre méthode appelée oblique. Les deux méthodes sont identiques. Cela peut rendre le texte incliné, mais ils se ressemblent tous les deux. Jetons un coup d'œil à l'exemple de code. 🎜rrreee🎜Effet de code🎜🎜 WeChat capture d'écran_20210820155928 .jpg

WeChat capture d'écran_20210820155928 .jpg

🎜🎜L'effet de code est sorti. C'est presque la même chose que celui de tout à l'heure, mais je veux créer un effet de flamme. Comment dois-je procéder ? 🎜🎜3. Supprimez d'abord la balise [Tilt], puis ajoutez <style type="text/css"></style> entre les balises head, puis ajoutez L'horizontale. alignement, police, couleur et ombre du texte saisi dans la balise >style, exemple de code. 🎜rrreee🎜Effet de code🎜🎜 WeChat capture d'écran_20210820161316 .jpg

WeChat capture d'écran_20210820161316 .jpg

🎜🎜4. Afin d'améliorer l'effet de flamme, définissez la couleur d'arrière-plan sur noir et entrez 🎜rrreee🎜code effect🎜🎜🎜🎜🎜🎜 dans la balise style. Apprentissage recommandé : 🎜 Tutoriel vidéo CSS 🎜🎜

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!