css 文字光影特效

css 复制代码
 <style>
      .text-area{
          text-align: center;
      }
      span{
          font-weight: bold;
          font-size:70px;
          color:#faebd7;
          animation:shadowing 1s ease-in-out infinite alternate;
      }
      span:nth-child(n+2){
          animation-delay: 0.2s;
      }
      span:nth-child(n+3){
          animation-delay: 0.4s;
      }
      span:nth-child(n+4){
          animation-delay: 0.4s;
      }
      span:nth-child(n+5){
          animation-delay: 0.5s;
      }
      span:nth-child(n+6){
          animation-delay: 0.6s;
      }
      span:nth-child(n+7){
          animation-delay: 0.7s;
      }
      span:nth-child(n+8){
          animation-delay: 0.8s;
      }
      span:nth-child(n+9){
          animation-delay: 0.9s;
      }
      @keyframes shadowing {
          to{
              color:#ff020f;
              text-shadow: 20px 0 70px #ff020f;
          }

      }
  </style>
html 复制代码
<div class="text-area">
      <span>加</span>
      <span>加</span>
      <span>加</span>
      <span>加</span>
      <span>油</span>
      <span>未</span>
      <span>来</span>
      <span>可</span>
      <span>期</span>
 </div>
相关推荐
lypzcgf3 分钟前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育44 分钟前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9491 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu1 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子1 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖1 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
良木林1 小时前
浅谈原型。
开发语言·javascript·原型模式
qq_12498707532 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
Alice-YUE2 小时前
【css学习笔记8】html5css3新特性
css·笔记·学习