css3 html5文字霓虹燈交替閃爍效果

2024-09-05 12:18:51

字體：大中小

來源：轉載

供稿：網友

CSS3技術實現的文字霓虹燈效果，文字交替出現，在火狐或Chrome下正常顯示，IE8或之下的版本有兼容性問題，代碼發上來僅是為了學習研究，沒有別的意思，盡管不是太實用。

<!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>N</p>  <p>E</p>  <p>O</p>  <p>N</p>  <span>—</span>  <p>L</p>  <p>I</p>  <p>G</p>  <p>H</p>  <p>T</p>  <p>S</p></section>  <script src="http://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網頁時鐘，圓形的電子鐘

下一篇：CSS3 HTML5網頁動畫時鐘特效