霓虹灯效果

原创于 2019-12-24 09:35:58 发布 · 197 阅读

1 ·

CC 4.0 BY-SA版权

练习专栏收录该内容

36 篇文章

订阅专栏

本文展示了一种使用HTML和CSS实现的霓虹灯效果，通过多层次的文字阴影叠加，为格莱科技云平台的标题和副标题增添炫酷的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>霓虹灯效果</title>
		<style type="text/css">
			body{background: #000000;color: #FFFFFF;}
			.box{border: 5px solid #011720;width: 680px;margin: 40px auto;text-align: center;padding: 20px 0;}
			.box h1{font: bold 80px myFonts,microsoft yahei;letter-spacing: .1em;text-shadow: 0 0 10px #FFFFFF,0 0 20px #FFFFFF,0 0 30px #FFFFFF,0 0 40px #FF00DE,0 0 70px #FF00DE,0 0 80px #FF00DE,0 0 100px #FF00DE,0 0 150px #FF00DE}
			.box h2{font: 18px "microsoft yahei";letter-spacing: .1em;text-shadow: 0 0 2px #ff00de,0 0 5px #ff00de;}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>格莱科技云平台</h1>
			<h2>互联网+时代学习系统，突破传统教与学，合理利用碎片化学习时间！</h2>
		</div>
	</body>
</html>