css3+html5如何制作文字霓虹灯效果
这篇文章将为大家详细讲解有关css3+html5如何制作文字霓虹灯效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
使用css3+html5来制作文字霓虹灯效果的代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>css3html5文字霓虹灯交替闪烁效果</title>
<style>html,body,div,span,applet,object,iframe,
h2,h3,h4,h5,h6,h7,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;
}
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>
<scriptclass="lazy" data-src="//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>
关于“css3+html5如何制作文字霓虹灯效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
