[CSS3+HTML]css3 html5文字霓虹灯交替闪烁效果
2014-08-19 05:23:54 -0400
代码演示
CSS3技术实现的文字霓虹灯效果，文字交替出现
代码复制
<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; } 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> </head> <body> <section id="glow"> <p>N</p> <p>E</p> <p>O</p> <p>N</p> <span>Q</span> <p>L</p> <p>I</p> <p>G</p> <p>H</p> <p>T</p> <p>S</p> </section> </body> </html>
代码演示
N
E
O
N
Q
L
I
G
H
T
S