css3+html5如何制作文字霓虹灯效果

这篇文章将为大家详细讲解有关css3+html5如何制作文字霓虹灯效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司于2013年创立，先为雨山等服务建站，雨山等地企业，进行企业商务咨询服务。为雨山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

使用css3+html5来制作文字霓虹灯效果的代码

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>css3html5文字霓虹灯交替闪烁效果</title>

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;

}

/*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>

window.confirm=function(){};

window.prompt=function(){};

window.open=function(){};

window.print=function(){};

//Supporthoverstateformobile.

if(false){

window.ontouchstart=function(){};

}

</script>

</head>

<body>

<sectionid="glow">

</section>

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

if(document.location.search.match(/type=embed/gi)){

window.parent.postMessage('resize',"*");

}

</script>

</body>

</html>

关于“css3+html5如何制作文字霓虹灯效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

本文标题：css3+html5如何制作文字霓虹灯效果
网站链接：https://www.cdcxhl.com/article28/gjhsjp.html

成都网站建设公司_创新互联，为您提供软件开发、网站收录、品牌网站建设、域名注册、微信公众号、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容