How to use css3 to achieve font internal glow effect (detailed explanation)-CSS Tutorial-php.cn

How to use css3 to achieve font internal glow effect (detailed explanation)

坏嘻嘻

Release： 2018-09-28 10:54:11

Original

7405 people have browsed it

In today's society with the increasing development of the Internet, people are becoming more and more demanding on web user experience, which has given rise to more derivatives of special effects, such as shadow effects, glow effects, etc. This article will introduce them to you. How to use CSS3 to achieve the special effect of font lighting has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The principle of using css3 to achieve the font glow effect

First we need to enter the text that needs to be added with special effects.
Then what we need to understand is that there is no luminous effect attribute in CSS3 itself, but we can achieve the luminous effect through the text-shadow attribute, so we will now focus on the text-shadow attribute.

Basic syntax of the text-shadow attribute: text-shadow: h-shadow v-shadow blur color;

h-shadow: horizontal shadow position ( Shadow horizontal offset), which can be negative. v-shadow: The position of the vertical shadow (the vertical offset of the shadow), which can be a negative value.

blur: Shadow blur distance (default is 0).

color: Shadow color, generally defaults to the font color.

In addition, we can also use another feature of text-shadow: setting multiple shadows at the same time (use commas to separate multiple shadows). This feature will not be introduced too much for now.

Using css3 to achieve font lighting effect example

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发光字体</title>
<style type="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all 0.1s;
     text-shadow:1px 1px 1px #00FF00;}
p:hover{ text-shadow:6px 6px 6px #00FF00;}
</style>
</head>
<body><p align="center">PHP中文网</p>
</body>
</html>

Copy after login

The font lighting effect is as shown in the figure Show How to use css3 to achieve font internal glow effect (detailed explanation)

The above is the detailed content of How to use css3 to achieve font internal glow effect (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!