html 火焰文字效果 霓虹文字效果（text-shadow）
shadow 阴影;
影子;
有两个应用
text-shadow有四个属性
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
| 值 | 描述 |
|---|---|
| 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;
}
推荐阅读
- django-前后端交互
- 时光，是行走在文字里的眷恋
- 罗塞塔石碑的意义（古埃及文字的起源，圣书体文字是如何被破解的）
- 爬虫数据处理HTML转义字符
- HTML基础--基本概念--跟着李南江学编程
- 琉璃心
- 【散文诗】河流
- 3.css浮动
- 【孩子的文字】星
- React.js的表单(六)