CSS3荧光灯文字闪烁动画特效

CodeAE

这是一款纯CSS3荧光灯文字闪烁动画特效。该特效在HTML结构中将文字拆分为单个span元素，然后通过CSS3代码来制作荧光灯和闪烁特效。
QQ录屏20230530101954.gif

html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS3荧光灯文字闪烁动画特效</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <style type="text/css">
        .demo{padding:2em 0; background: #2c2c54; }
        .text-effect{
          color: #fff;
          font-family: 'Monoton', cursive;
          font-size: 100px;
          font-weight: 700;
          text-transform: uppercase;
          text-align: center;
          margin: 0 auto;
          display: block;
          position: relative;
            font-family: 微软雅黑
        }
        .text-effect span{ animation: animate linear 2000ms infinite; }
        .text-effect span:nth-child(1n){ animation-delay: 0s; }
        .text-effect span:nth-child(2n){ animation-delay: 100ms; }
        .text-effect span:nth-child(3n){ animation-delay: 200ms; }
        .text-effect span:nth-child(4n){ animation-delay: 300ms; }
        .text-effect span:nth-child(5n){ animation-delay: 400ms; }
        .text-effect span:nth-child(6n){ animation-delay: 500ms; }
        .text-effect span:nth-child(7n){ animation-delay: 600ms; }
        .text-effect span:nth-child(8n){ animation-delay: 700ms; }
        .text-effect span:nth-child(9n){ animation-delay: 800ms; }
        .text-effect span:nth-child(10n){ animation-delay: 900ms; }
        @keyframes animate{
          0%{ opacity: 0.3; }
          100%{
             opacity:1;
             text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
          }
        }
        @media only screen and (max-width: 990px){
          .text-effect{ font-size: 65px; }
        }
        @media only screen and (max-width: 767px){
          .text-effect{ font-size: 50px; }
        }
        @media only screen and (max-width: 479px){
          .text-effect{ font-size: 36px; }
        }
        @media only screen and (max-width: 359px){
          .text-effect{ font-size: 27px; }
        }
    </style>
</head>
<body>
    <div class="htmleaf-container">

        <div class="demo" style="min-height:350px;">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="text-effect">
            <span>C</span>
            <span>O</span>
            <span>D</span>
            <span>E</span>
            <span>代</span>
            <span>码</span>
            <span>之</span>
            <span>家</span>
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
</body>
</html>

[Html/CSS] CSS3荧光灯文字闪烁动画特效

相关帖子

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

H5+JS+CSS3实现七夕言情源码分享

常用HTML网页跳转的几种方法

好看的CSS3滑动按钮特效

好看的CSS剪裁GIF背景图片动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

css3怎样设置子元素居中的方法

CodeAE LV9