溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2022-02-24 14:36:30 來源：億速云 閱讀：286 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css3+html5如何制作文字霓虹燈效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　使用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>網(wǎng)</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>

關(guān)于“css3+html5如何制作文字霓虹燈效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手