您的位置：首页 > Web前端 > CSS

CSS：文字模糊效果

2015-09-17 17:57 696 查看
今天在网上看到了一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航