<!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>
时间： 2024-10-06 22:55:41