实现原理
1、加载了谷歌的漂亮的公共字体库。
2、加载jquery-1.11.0.min.js
3、设置css3动画特性。
Html结构
<div class="zzsc-content">
<div class="first_neon">Enjoy NEON</div>
<div class="second_neon">Enjoy NEON</div>
<div class="third_neon">Enjoy NEON</div>
</div>
CSS代码
.first_neon {
background: none repeat scroll 0 0 #000000;
border: 1px solid;
border-radius: 15px;
color: #FFFFFF;
cursor: pointer;
float: left;
font-family:"Warnes";
margin: auto;
padding: 26px 10px;
text-align: center;
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;
transition: text-shadow 0.5s ease 0s;
width: 250px;
}
.first_neon:hover {
text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
}
.second_neon {
border: 1px solid;
border-radius: 10px;
color: #FFFFFF;
cursor: pointer;
display: table-cell;
float: left;
font-family:"Zeyada";
margin-left: 20px;
transition: text-shadow 0.5s ease 0s;
padding: 45px 25px;
text-align: center;
text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #008000, 0 0 70px #008000, 0 0 80px #008000, 0 0 100px #008000;
width: 250px;
}
.second_neon:hover {
text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFF00, 0 0 70px #FFFF00, 0 0 80px #FFFF00, 0 0 100px #FFFF00;
}
.third_neon {
border: 1px solid;
border-radius: 10px;
color: #FFFFFF;
cursor: pointer;
display: table-cell;
float: left;
font-family:"Princess Sofia";
margin-left: 20px;
transition: text-shadow 0.5s ease 0s;
padding: 13px 25px;
text-align: center;
text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
width: 250px;
}
.third_neon:hover {
text-shadow: 0 0 6px #FFFFFF, 0 0 15px #FFFFFF, 0 0 25px #FFFFFF, 0 0 40px #7FFF00, 0 0 70px #7FFF00, 0 0 80px #7FFF00, 0 0 100px #7FFF00;
}
完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery/CSS3 special effects DEMO演示</title>
<link rel="stylesheet" type="text/css" href="static/zzsc-demo.css" />
<link rel="stylesheet" type="text/css" href="static/normalize.css" />
<link type="text/css" rel="stylesheet" href="static/style.css" />
<link async href="http://fonts.googleapis.com/css?family=Warnes" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Zeyada" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Princess%20Sofia" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="zzsc-content">
<div class="first_neon">Enjoy NEON</div>
<div class="second_neon">Enjoy NEON</div>
<div class="third_neon">Enjoy NEON</div>
</div>
<script src="static/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/neon_text.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.first_neon').neonText();
$('.second_neon').neonText({
textColor:'white',
textSize:'40pt',
neonHighlight:'white',
neonHighlightColor:'#008000',
neonHighlightHover:'#FFFF00',
neonFontHover:'white'
});
$('.third_neon').neonText({
textColor:'white',
textSize:'40pt',
neonHighlight:'white',
neonHighlightColor:'#00FFFF',
neonHighlightHover:'#7FFF00',
neonFontHover:'white'
});
});
</script>
</body>
</html>
效果：http://demo.shanhubei.com/demo/special-effects/
