html 火焰文字效果 霓虹文字效果(text-shadow)
shadow 阴影; 影子; 有两个应用
text-shadow有四个属性
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
box-shadow有六个属性
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
/*页面样式设置*/
body {
background-color: black;
color: white;
font-size: 80px;
font-weight: bold;
padding: 30px;
}
/*火焰样式*/
#fire {
margin: 30px;
text-shadow:
0 0 5px #fff,
0 0 20px #fefcc9,
10px -10px 30px #feec85 ,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}
/*霓虹灯样式*/
#neon {
margin: 30px;
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #6AB5FF,
0 0 70px #6AB5FF,
0 0 80px #6AB5FF,
0 0 100px #6AB5FF,
0 0 150px #6AB5FF;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)