今天在网上看到了一个js的特效,文字模糊效果,看了一下原代码,发现其实很简单,整个效果由两部分组成:
一、设定基本样式,文字属性透明,加入阴影,这就是模糊特效:
h1 {
color: transparent;
text-shadow:2px 2px 12px #000000;
}
二、鼠标悬浮,给文字添加颜色,阴影面积变小:
h1:hover {
color: #000000;
text-shadow:0px 0px 3px #000000;
}
源文件如下:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: transparent;
text-shadow:2px 2px 12px #000000;
}
h1:hover {
color: #000000;
text-shadow:0px 0px 3px #000000;
}
</style>
</head>
<body>
<h1>霓虹灯效果的文本阴影!</h1>
</body>
</html>