Teach you step by step how to use css to add flame effects to text (detailed code explanation)-CSS Tutorial-php.cn

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

奋力向前

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

Original

3180 people have browsed it

In the previous article "Teach you how to use html to add border effects to pictures (detailed code explanation)", I introduced how to use html to add border effects to pictures. The following article will introduce to you how to use CSS to add flame effects to text. Let’s see how to do it together.

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

Open the HTML code software and create a code

1. Here is a p tag, and then we can Write a few, smile when you are happy, sleep when you are tired, smile when you wake up, code example .

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

Copy after login

Code effect

The code effect came out and I found it to be a very standard font, right? I If you want to change this font to italic, let's take a look at how to do it.

2. Actually, there is a style that can help us called font-style. There is something called italic. This thing can directly help us. This text is italicized, code example.

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

Copy after login

Code effect

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

The code effect came out, and I found that the text is really slanted. This is an italic of a text, and it also has another One method is called oblique. Both of these methods can make the text oblique, but they both look the same. Let’s take a look at the code example.

p{font-style: oblique;}

Copy after login

Code effect

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

The code effect is out. It feels almost the same as the one just now, right? But I want to make a flame effect, so how do I do it?

3. Delete the [Tilt] tag first, and then add <style type="text/css"></style> between the head tags and then Enter the horizontal alignment, font, color, shadow, and code example of the text in the style tag.

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

Copy after login

Code Effect

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

4. In order to enhance the flame effect, set the background color to black and enter it in the style tag

body{background-color:#000;}

Copy after login

Code effect

Teach you step by step how to use css to add flame effects to text (detailed code explanation)

Recommended learning: CSS video tutorial

The above is the detailed content of Teach you step by step how to use css to add flame effects to text (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!