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;
}
posted @   coderwcb  阅读(452)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示