滑动解锁 

<!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>

 

posted @ 2015-06-11 10:20  醉酒笑红尘  阅读(137)  评论(0)    收藏  举报