布局：
<body><h2><span style="--i:1;">H</span><span style="--i:2;">a</span><span style="--i:3;">p</span><span style="--i:4;">p</span><span style="--i:5;">y</span><span style="--i:6; margin-left:5vw;">N</span><span style="--i:7;">e</span><span style="--i:8;">w</span><span style="--i:9; margin-left:5vw;">Y</span><span style="--i:10;">e</span><span style="--i:11;">a</span><span style="--i:12;">r</span></h2></body>
样式：
<style>*{margin: 0;padding: 0;box-sizing: border-box;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}body{color: #fff;background-color: #111;display: flex;justify-content: center;align-items: center;min-height: 100vh;}h2{display: flex;color: transparent;font-size: 10vw;}h2 span{animation: animate 3s linear infinite;animation-delay: calc(0.1s* var(--i));}@keyframes animate{0%{color: #fff;filter: blur(2px) hue-rotate(0deg);text-shadow: 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;}30%,70%{color: #fff;filter: blur(2px) hue-rotate(360deg);text-shadow: 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;}100%{color: transparent;box-shadow: none;filter: blur(2px) hue-rotate(0deg);}}</style>
查看效果：
