Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).-CSS-Tutorial-php.cn

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

奋力向前

Freigeben： 2021-08-20 17:13:08

Original

3154 Leute haben es durchsucht

Im vorherigen Artikel „Ein Trick, um Ihnen beizubringen, wie Sie mit HTML Randeffekte zu Bildern hinzufügen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit HTML Randeffekte zu Bildern hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS Flammeneffekte zu Text hinzufügen. Sehen wir uns gemeinsam an, wie das geht.

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

Öffnen Sie die HTML-Code-Software und erstellen Sie einen Code

1 Hier ist ein p-Tag, und dann können wir einfach ein paar schreiben, lachen, wenn wir glücklich sind, und schlafen, wenn wir sind müde und wachen auf, wenn wir müde sind. Einfach lächeln, Codebeispiel. p标签，然后咱就随便写几个，开心就笑，累了就睡觉，醒了就微笑，代码示例。

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

Nach dem Login kopieren

代码效果

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

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

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

Nach dem Login kopieren

代码效果

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

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

p{font-style: oblique;}

Nach dem Login kopieren

代码效果

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

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

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;
}

Nach dem Login kopieren

代码效果

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

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

body{background-color:#000;}

Nach dem Login kopieren

Codeeffekt

Der Codeeffekt kam heraus und ich stellte fest, dass es sich um eine sehr Standardschriftart handelt, oder? Ich möchte diese Schriftart in Kursivschrift umwandeln. Wie mache ich das? ?Komm und lass uns zusehen. Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).

2. Tatsächlich gibt es einen Stil namens font-style, der uns direkt bei der Kursivschrift helfen kann. Codebeispiel.

rrreeeCodeeffekt

🎜🎜Der Codeeffekt kam heraus und ich stellte fest, dass der Text wirklich schräg ist. Dies ist eine Kursivschrift eines Textes. Es gibt auch eine andere Methode namens oblique. Beide Methoden sind gleich. Dadurch kann der Text schief werden, aber beide sehen gleich aus. Schauen wir uns das Codebeispiel an. 🎜rrreee🎜Codeeffekt🎜🎜 WeChat-Screenshot_20210820155928 .jpg

🎜🎜Der Codeeffekt ist draußen. Er fühlt sich ähnlich an wie der gerade, oder? Aber ich möchte einen Flammeneffekt machen, also wie mache ich das? 🎜🎜3. Löschen Sie zuerst das Tag [Tilt], fügen Sie dann <style type="text/css"></style> zwischen den Head-Tags hinzu und fügen Sie dann The horizontal hinzu Ausrichtung, Schriftart, Farbe und Schatten des Eingabetextes im Tag >style, Codebeispiel. 🎜rrreee🎜Codeeffekt🎜🎜 WeChat-Screenshot_20210820161316 .jpg

🎜🎜4. Um den Flammeneffekt zu verstärken, stellen Sie die Hintergrundfarbe auf Schwarz ein und geben Sie 🎜rrreee🎜code effect🎜🎜🎜🎜🎜🎜 in das style-Tag ein. Lernempfehlung: 🎜 CSS-Video-Tutorial 🎜🎜

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Flammeneffekte zum Text hinzufügen (detaillierte Code-Erklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!