首页 > web前端 > css教程 > 正文

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

坏嘻嘻
发布: 2018-09-30 10:12:58
原创
4827人浏览过

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

文字霓虹灯效果如图所示

GIF.gif

总结

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

以上就是如何使用css3+html5来制作文字霓虹灯效果(付完整代码)的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号