如何用CSS实现文本闪烁发光？现有代码失效排查求助

我帮你检查了代码，发现几处语法错误和不规范写法，导致霓虹灯闪烁效果无法生效，具体问题和修复如下：

核心问题点 #

• 字体导入语法错误：@import 里的字体URL缺少 ?，导致Pacifico字体无法加载，正确格式应该是 @import url(//fonts.googleapis.com/css?family=Pacifico);
• CSS属性语法错误：
  • .lasvegas span.delay 中 animation-delay 和 animation-direction 之间缺少分号，而且把动画时间函数错误写在了 animation-direction 后面，应该单独用 animation-timing-function 定义
  • 关键帧里的 text-shadow 有多余的点（0 0 10px. rgba(...)），还有 text- shadow 中间多了空格，属于拼写错误
• 非标准属性兼容性问题：text-stroke 不是标准CSS属性，需要添加浏览器前缀（比如 -webkit-text-stroke）才能在多数浏览器生效
• 关键帧初始状态缺失：@keyframes blink 的0%和50%关键帧没有定义属性，导致动画过渡逻辑不清晰

修正后的完整代码 #

CSS代码 #

@import url(//fonts.googleapis.com/css?family=Pacifico);
body { 
  min-height: 100vh; 
  padding-top: 5rem; 
  background: #112 url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg) center no-repeat; 
  background-size: cover; 
  margin: 0; 
  overflow: hidden; 
}
.lasvegas { 
  font-family: 'Pacifico', cursive; 
  font-size: 80px; 
  border: none; 
  color: rgba(255,255,255,0.6); 
  text-align: center; 
  text-shadow: 
    1px 5px 4px rgba(0,0,0,.3), 
    0 0 2px rgba(255,255,255,1), 
    0 0 10px rgba(255,255,255,1), 
    0 0 20px rgba(255,255,255,1), 
    0 0 30px rgba(255,255,255,1), 
    0 0 40px #ff00de,
    0 0 70px #ff00de, 
    0 0 80px #ff00de, 
    0 0 100px #ff00de; 
}
.lasvegas span { 
  animation: blink .3s infinite alternate; 
}
.lasvegas span.delay { 
  animation-duration: 6s; 
  animation-delay: 2s; 
  animation-direction: alternate; 
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); 
}
@keyframes blink {
  0% { 
    text-shadow: 
      1px 5px 4px rgba(0,0,0,.3), 
      0 0 2px rgba(255,255,255,1), 
      0 0 10px rgba(255,255,255,1), 
      0 0 20px rgba(255,255,255,1), 
      0 0 30px rgba(255,255,255,1), 
      0 0 40px #ff00de,
      0 0 70px #ff00de, 
      0 0 80px #ff00de, 
      0 0 100px #ff00de; 
  }
  50% { 
    text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .4); 
    -webkit-text-stroke: 2px rgba(255,255,255,0.05);
    text-stroke: 2px rgba(255,255,255,0.05);
  }
  60% { 
    text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .4); 
    -webkit-text-stroke: 2px rgba(255,255,255,0.05);
    text-stroke: 2px rgba(255,255,255,0.05); 
  }
  70% { 
    text-shadow: 
      1px 5px 4px rgba(0,0,0,.3), 
      0 0 2px rgba(255,255,255,1), 
      0 0 10px rgba(255,255,255,1), 
      0 0 20px rgba(255,255,255,1), 
      0 0 30px rgba(255,255,255,1), 
      0 0 40px #ff00de,
      0 0 70px #ff00de, 
      0 0 80px #ff00de, 
      0 0 100px #ff00de; 
  }
  80% { 
    text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .4); 
    -webkit-text-stroke: 2px rgba(255,255,255,0.05);
    text-stroke: 2px rgba(255,255,255,0.05); 
  }
  100% { 
    text-shadow: 
      1px 5px 4px rgba(0,0,0,.3), 
      0 0 2px rgba(255,255,255,1), 
      0 0 10px rgba(255,255,255,1), 
      0 0 20px rgba(255,255,255,1), 
      0 0 30px rgba(255,255,255,1), 
      0 0 40px #ff00de,
      0 0 70px #ff00de, 
      0 0 80px #ff00de, 
      0 0 100px #ff00de; 
  }
}

HTML代码 #

<div class="lasvegas"> Neon text f<span>ro</span>m<br> Las <span class="delay">V</span>egas </div>

补充说明 #

• 修正后的代码解决了所有语法错误，并且为text-stroke添加了-webkit前缀保证兼容性
• 关键帧的0%状态继承了.lasvegas的初始阴影，让动画过渡更自然
• 现在两个<span>元素会分别以0.3秒和6秒的间隔交替闪烁，符合你想要的不同间隔霓虹灯效果

内容的提问来源于stack exchange，提问作者user11417397