使用css3+html5来制作文字霓虹灯效果的特点
文字带有闪烁的霓虹灯动画，且文字选中时也有很酷的动画特效；
文字可动态输入，且输入的文字实时渲染霓虹灯特效。
使用css3+html5来制作文字霓虹灯效果的步骤
输入需要加入特效的文本。
利用box-shadow的多层阴影属性，绘制霓虹管的立体效果。
利用text-shadow多层阴影，绘制文字灯管，发光，投影，达到设置立体文字的效果。
这里我们着重介绍一下实现霓虹灯闪烁效果的原理
我们需要在文本上设置两个标签，并且让他们完全重合，上层实现灯管效果，下层实现光晕效果，再利用选择器使其不断闪烁，同时我们需要设置熄灭和点亮两个状态的text-shadow属性值，使他们以不同速度的切换，就形成了霓虹灯闪烁的效果。
注意：如有对于以上内容不理解的小伙伴可以查看本站内其他文章
如何使用css3实现图片的简单阴影效果（附完整代码）
如何使用css3实现字体内发光效果（详解）
使用css3+html5来制作文字霓虹灯效果的代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>css3html5文字霓虹灯交替闪烁效果</title>
<style>html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/*HTML5display-roleresetforolderbrowsers*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
body{
background-color:#222;
background-image:-webkit-radial-gradient(circle,#333,#222,#111);
background-attachment:fixed;
overflow:hidden;
font-family:'WireOne',sans-serif;
font-size:6em;
color:#FFF;
line-height:normal;
text-align:center;
}
#glow{
position:absolute;
top:0;
bottom:0;
width:100%;
height:1em;
margin:auto;
display:block;
}
#glowp,
#glowspan{
display:inline-block;
color:#FFF;
text-shadow:0015px;
}
#glowp:nth-child(odd){
-webkit-animation:bglow.3seaseinfinite;
}
#glowp:nth-child(even){
-webkit-animation:rglow.3seaseinfinite;
}
@-webkit-keyframesbglow{
0%{
color:rgb(0,135,211);
text-shadow:0015px;
}
}
@-webkit-keyframesrglow{
100%{
color:rgb(233,54,40);
text-shadow:0015px;
}
}
</style>
<script>
window.confirm=function(){};
window.prompt=function(){};
window.open=function(){};
window.print=function(){};
//Supporthoverstateformobile.
if(false){
window.ontouchstart=function(){};
}
</script>
</head>
<body>
<sectionid="glow">
<p>P</p>
<p>H</p>
<p>P</p>
<p>中</p>
<p>文</p>
<p>网</p>
</section>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if(document.location.search.match(/type=embed/gi)){
window.parent.postMessage('resize',"*");
}
</script>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55406.shtml
