溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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;
}
/*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>
關于“css3+html5如何制作文字霓虹燈效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
