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

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

文字可動態輸入，且輸入的文字實時渲染霓虹燈特效。

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

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

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

利用text-shadow多層陰影，繪制文字燈管，發光，投影，達到設置立體文字的效果。

這里我們著重介紹一下實現霓虹燈閃爍效果的原理

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

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

如何使用css3實現圖片的簡單陰影效果（附完整代碼）

如何使用css3實現字體內發光效果（詳解）

使用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 網 /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 

文字霓虹燈效果如圖所示

總結

剛開始以為文字霓虹燈效果是gif動畫之類的，審查元素發現居然是用html5 + CSS3動畫實現的，頓時激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發現原理居然是如此簡單，希望本文內容可以為大家帶來幫助。

以上就是如何使用css3+html5來制作文字霓虹燈效果（付完整代碼）的詳細內容，其它編程語言

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