使用css3+html5來制作文字霓虹燈效果的特點(diǎn)

文字帶有閃爍的霓虹燈動畫，且文字選中時也有很酷的動畫特效；

文字可動態(tài)輸入，且輸入的文字實(shí)時渲染霓虹燈特效。

使用css3+html5來制作文字霓虹燈效果的步驟

輸入需要加入特效的文本。

利用box-shadow的多層陰影屬性，繪制霓虹管的立體效果。

利用text-shadow多層陰影，繪制文字燈管，發(fā)光，投影，達(dá)到設(shè)置立體文字的效果。

這里我們著重介紹一下實(shí)現(xiàn)霓虹燈閃爍效果的原理

我們需要在文本上設(shè)置兩個標(biāo)簽，并且讓他們完全重合，上層實(shí)現(xiàn)燈管效果，下層實(shí)現(xiàn)光暈效果，再利用選擇器使其不斷閃爍，同時我們需要設(shè)置熄滅和點(diǎn)亮兩個狀態(tài)的text-shadow屬性值，使他們以不同速度的切換，就形成了霓虹燈閃爍的效果。

注意：如有對于以上內(nèi)容不理解的小伙伴可以查看本站內(nèi)其他文章

如何使用css3實(shí)現(xiàn)圖片的簡單陰影效果（附完整代碼）

如何使用css3實(shí)現(xiàn)字體內(nèi)發(fā)光效果（詳解）

使用css3+html5來制作文字霓虹燈效果的代碼

 !DOCTYPE html  html  head  meta charset= UTF-8  title css3 html5文字霓虹燈交替閃爍效果 /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;/* HTML5 display-role reset for older browsers */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: Wire One , 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;#glow p,#glow span{ display: inline-block; color: #FFF; text-shadow: 0 0 15px;#glow p:nth-child(odd) { -webkit-animation: bglow .3s ease infinite;#glow p:nth-child(even) { -webkit-animation: rglow .3s ease infinite;@-webkit-keyframes bglow { 0% { color: rgb(0, 135, 211); text-shadow: 0 0 15px;@-webkit-keyframes rglow { 100% { color: rgb(233, 54, 40); text-shadow: 0 0 15px; /style  script  window.confirm = function(){}; window.prompt = function(){}; window.open = function(){}; window.print = function(){}; // Support hover state for mobile. if (false) { window.ontouchstart = function(){}; /script  /head  body  section id= glow  p P /p  p H /p  p P /p  p 中 /p  p 文 /p  p 網(wǎng) /p  /section  script 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 

文字霓虹燈效果如圖所示

總結(jié)

剛開始以為文字霓虹燈效果是gif動畫之類的，審查元素發(fā)現(xiàn)居然是用html5 + CSS3動畫實(shí)現(xiàn)的，頓時激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發(fā)現(xiàn)原理居然是如此簡單，希望本文內(nèi)容可以為大家?guī)韼椭?p>以上就是如何使用css3+html5來制作文字霓虹燈效果（付完整代碼）的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。