<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文字蒙板</title> <style type="text/css"> @-webkit-keyframes test{ from{ background-position: -200px 0; } to{ background-position: 600px 0; } } #box{ width: 400px; height: 50px; line-height: 50px; position: relative; background: #000; color: #999; font-size: 30px; font-weight: bold; letter-spacing: 2px; text-align: center;} #box span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #box span.top{ background:-webkit-linear-gradient(-30deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%); -webkit-background-clip:text; color:rgba(0,0,0,0); background-position: -200px 0; -webkit-animation-name:test; -webkit-animation-duration:4s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; } </style> <script type="text/javascript"></script> </head> <body> <div id="box"> <span>滑动开始解锁</span> <span class="top">滑动开始解锁</span> </div> </body> </html>