效果图
源码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>闪烁霓虹灯文字动画</title><style>/* cyrillic */@font-face {font-family: 'Bad Script';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/s/badscript/v16/6NUT8F6PJgbFWQn47_x7pO8kzO1A.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}/* latin */@font-face {font-family: 'Bad Script';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/s/badscript/v16/6NUT8F6PJgbFWQn47_x7pOskzA.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;font-family: 'Bad Script', cursive;}h1 {margin: 0;padding: 0;color: #111;font-size: 16em;}h1 span {display: table-cell;margin: 0;padding: 0;animation: animate 2s linear infinite;animation-delay: calc(var(--i)*0.25s);}@keyframes animate {0%,100% {color: #fff;filter: blur(2px);text-shadow: 0 0 10px #00b3ff,0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;}5%,95% {color: #111;filter: blur(0px);text-shadow: none;}}</style>
</head><body><h1 class="text-luminous"></h1><Script>window.onload = () => {let strText = "stunning"strLuminous(strText);function strLuminous() {let luminousBox = document.getElementsByClassName("text-luminous")[0];var strList = arguments[0].slice("");for (let index = 0; index < strList.length; index++) {var span = document.createElement('span');span.style = '--i:' + index + ';';span.innerHTML = strList[index];luminousBox.appendChild(span);luminousBox.style = 'background-color: #000;'}}};</Script>
</body></html>
