如何使用css3+html5來制作文字霓虹燈效果（付完整代碼）

2020-03-24 16:04:08

字體：大中小

來源：轉載

供稿：網友

在科技日益發展的今天，人們對于審美越來越挑剔，這就要求我們對于前端開發的態度更加的嚴謹的同時，需要加入新鮮的元素，以達到吸引目光的目的。那么今天本文帶大家了解一下如何使用css3+html5來制作文字霓虹燈效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

文字霓虹燈效果如圖所示