效果展示： 代码部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } .container { position: relative; width: 100%; height: 100%; background: #000; } p { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size: 200px; text-transform: uppercase; font-weight: 800; letter-spacing: 20px; background: url('bg1.jpg') center no-repeat; background-size: cover; background-clip: text; -webkit-background-clip: text; tetx-fill-color:transparent; -webkit-text-fill-color:transparent; animation:move 5s linear 0s infinite; animation-direction:alternate; } @keyframes move { form { background-position: 0% 0%; } to { background-position: 100% 100%; } } </style> </head> <body> <div class="container"> <p>text</p> </div> </body> </html>