iphone开机动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iphone开机动画</title>
    <style type="text/css">
        body{
            background-color: #000000;
            text-align: center;
            font: 50px/200px '微软雅黑';
        }
        h1{
            color: rgba(255,255,255,0.3);
            background: -webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) -300px 0 no-repeat;
            /*background-clip: text;*/
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>  
    <h1>iphone开机动画</h1>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        var oH1 = document.getElementsByTagName('h1')[0];
        var timer = null;
        var iLeft = -300;
        function toMove() {
            timer = setInterval(function () {
                iLeft += 10;
                oH1.style.backgroundPosition = iLeft + 'px 0px';
                if (iLeft == 1000) {
                    iLeft = -300; 
                    clearInterval(timer);
                }
            },20)
        }
        toMove();
        setInterval(function () {
            toMove();
        },2*1000);
    </script>
</body>
</html>
iphone开机动画

推荐阅读更多精彩内容
