首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

[分享]css3文字发光效果

发布于 2024-11-11 15:55:32
0
10

CSS3文字发光效果是一种非常酷炫的效果,可以让文本更加突出和吸引人的眼球。下面我们就来学习一下如何制作这种效果。.text{ color:fff; fontsize:30px; textshadow...

CSS3文字发光效果是一种非常酷炫的效果,可以让文本更加突出和吸引人的眼球。下面我们就来学习一下如何制作这种效果。

.text{
    color:#fff;
    font-size:30px;
    text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00e6e6,0 0 70px #00cccc,0 0 80px #00e6e6,0 0 100px #00e6e6,0 0 150px #00cccc;
} 

以上代码是制作文字发光效果的关键代码,下面我们来具体解释一下。

首先我们给要制作效果的文本添加一个类名".text",然后我们给它设置文字颜色为白色,字体大小为30px。

接下来就是关键的代码了,我们使用"text-shadow"属性来指定文字的发光效果。每一组 "text-shadow" 属性由四个值组成:

  1. 水平偏移量
  2. 垂直偏移量
  3. 模糊距离(可选,也可以设置为0)
  4. 发光颜色

我们使用了八组 "text-shadow" 属性,每一组属性中颜色不同且发光的角度不同,形成了锐利的发光效果。

最后我们将所有的属性设置在一起就可以制作出很酷炫的文字发光效果了!

评论
一个月内的热帖推荐
91云脑
Lv.1普通用户

62849

帖子

14

小组

291

积分

赞助商广告
站长交流