在科技日益发展的今天，人们对于审美越来越挑剔，这就要求我们对于前端开发的态度更加的严谨的同时，需要加入新鲜的元素，以达到吸引目光的目的。那么今天本文带大家了解一下如何使用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>文字霓虹灯效果如图所示
总结
刚开始以为文字霓虹灯效果是gif动画之类的，审查元素发现居然是用html5 + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单，希望本文内容可以为大家带来帮助。
