如何使用css3+html5来制作文字霓虹灯效果（付完整代码）

来源：动视网责编：小采时间：2020-11-02 22:08:38

如何使用css3+html5来制作文字霓虹灯效果（付完整代码）

如何使用css3+html5来制作文字霓虹灯效果（付完整代码）:在科技日益发展的今天，人们对于审美越来越挑剔，这就要求我们对于前端开发的态度更加的严谨的同时，需要加入新鲜的元素，以达到吸引目光的目的。那么今天本文带大家了解一下如何使用css3+html5来制作文字霓虹灯效果，有一定的参考价值，有需要的朋友可以参考

推荐度：

点击下载本文 文档为doc格式

导读如何使用css3+html5来制作文字霓虹灯效果（付完整代码）:在科技日益发展的今天，人们对于审美越来越挑剔，这就要求我们对于前端开发的态度更加的严谨的同时，需要加入新鲜的元素，以达到吸引目光的目的。那么今天本文带大家了解一下如何使用css3+html5来制作文字霓虹灯效果，有一定的参考价值，有需要的朋友可以参考

在科技日益发展的今天，人们对于审美越来越挑剔，这就要求我们对于前端开发的态度更加的严谨的同时，需要加入新鲜的元素，以达到吸引目光的目的。那么今天本文带大家了解一下如何使用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>

文字霓虹灯效果如图所示