Home > Article > Web Front-end > Teach you step by step how to use css to add flame effects to text (detailed code explanation)

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

奋力向前Original: 2021-08-20 16:34:033194browse

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.

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>

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>

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

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

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create a wavy background using CSS?Next article：How to create a wavy background using CSS?

See more

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

Related articles