代码如下：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>CodePen - word animation | word filter</title> <style> * { box-sizing: border-box; } html, body { height: 100%; width: 100%; background-color: black; padding:0; margin:0; } .container { width: 100%; height: 100%; position: relative; filter: contrast(20); background-color: black; overflow: hidden; } h1 { font-family:consolas, 黑体; color: white; font-size: 4rem; text-transform: uppercase; line-height: 1; animation: letterspacing 5s infinite alternate ease-in-out; display: block; position: absolute; left: 50%; top: 40%; transform: translate3d(-50%, -50%, 0); letter-spacing: -2rem; white-space:nowrap; padding:0; margin:0; } @keyframes letterspacing { 0% { letter-spacing: -2rem; filter: blur(1rem); color:red; } 50% { filter: blur(0.5rem); } 80% { letter-spacing: .5rem; filter: blur(0.1rem); color: #fff; } 100% { letter-spacing: 0.5rem; filter: blur(0rem); color: #fff; } } </style> </head> <body> <div class="container"> <h1>ABCDE 中文测试</h1> </div> </body> </html>