本文由 DTcms素材网 – DT素材网 发布,转载请注明出处,如有问题请联系我们!如何使用css3+html5来制作文字霓虹灯效果(付完整代码)

收藏

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

使用css3+html5来制作文字霓虹灯效果的特点

  1. 文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效;

  2. 文字可动态输入,且输入的文字实时渲染霓虹灯特效。

使用css3+html5来制作文字霓虹灯效果的步骤

  1. 输入需要加入特效的文本。

  2. 利用box-shadow的多层阴影属性,绘制霓虹管的立体效果。

  3. 利用text-shadow多层阴影,绘制文字灯管,发光,投影,达到设置立体文字的效果。

  4. 这里我们着重介绍一下实现霓虹灯闪烁效果的原理

    我们需要在文本上设置两个标签,并且让他们完全重合,上层实现灯管效果,下层实现光晕效果,再利用选择器使其不断闪烁,同时我们需要设置熄灭和点亮两个状态的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>

文字霓虹灯效果如图所示

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

总结

刚开始以为文字霓虹灯效果是gif动画之类的,审查元素发现居然是用html5 + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探究竟,查看代码之后,发现原理居然是如此简单,希望本文内容可以为大家带来帮助。

标签
DT素材网

DT素材网

195

0

0

( 此人很懒并没有留下什么~~ )