css3+html5如何制作文字霓虹灯效果

发布时间:2022-02-24 14:36:30 作者:小新
来源:亿速云 阅读:291

这篇文章将为大家详细讲解有关css3+html5如何制作文字霓虹灯效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="UTF-8">

  <title>css3html5文字霓虹灯交替闪烁效果</title>

  <style>html,body,div,span,applet,object,iframe,

  h2,h3,h4,h5,h6,h7,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;

  }

  /*HTML5display-roleresetforolderbrowsers*/

  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:'WireOne',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;

  }

  #glowp,

  #glowspan{

  display:inline-block;

  color:#FFF;

  text-shadow:0015px;

  }

  #glowp:nth-child(odd){

  -webkit-animation:bglow.3seaseinfinite;

  }

  #glowp:nth-child(even){

  -webkit-animation:rglow.3seaseinfinite;

  }

  @-webkit-keyframesbglow{

  0%{

  color:rgb(0,135,211);

  text-shadow:0015px;

  }

  }

  @-webkit-keyframesrglow{

  100%{

  color:rgb(233,54,40);

  text-shadow:0015px;

  }

  }

  </style>

  <script>

  window.confirm=function(){};

  window.prompt=function(){};

  window.open=function(){};

  window.print=function(){};

  //Supporthoverstateformobile.

  if(false){

  window.ontouchstart=function(){};

  }

  </script>

  </head>

  <body>

  <sectionid="glow">

  <p>P</p>

  <p>H</p>

  <p>P</p>

  <p>中</p>

  <p>文</p>

  <p>网</p>

  </section>

  <scriptsrc="//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如何制作文字霓虹灯效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. jQuery制作输入文字弹幕显示动画效果
  2. 制作UILabel的文字特效效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 html5

上一篇:CSS的Grid布局怎么实现小狗邮票

下一篇:怎样使用CSS实现一只鸭子头

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》