效果图
源码示例
<!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>