模拟动态进度条 

<style type="text/css">
        .process {
            width: 10px;
            height: 18px;  
            background-color: #5bc0de;
            background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
            -webkit-animation: stripes 5s linear infinite;
            animation: stripes 5s linear infinite;
        }
        .processed {
            padding-right: 100%;
            -webkit-animation: none;
            animation: none;
        }

        @keyframes stripes {
            0%   { padding-right: 1%; } 
            1%   { padding-right: 2%; } 
            3%   { padding-right: 4%; } 
            10%  { padding-right: 5%; } 
            20%  { padding-right: 8%; } 
            30%  { padding-right: 30%; } 
            40%  { padding-right: 50%; } 
            60%  { padding-right: 80%; } 
            80%  { padding-right: 100%; }  
        }

        @-webkit-keyframes stripes {/*Safari and Chrome*/
            0%   { padding-right: 1%; } 
            1%   { padding-right: 2%; } 
            3%   { padding-right: 4%; } 
            10%  { padding-right: 5%; } 
            20%  { padding-right: 8%; } 
            30%  { padding-right: 30%; } 
            40%  { padding-right: 50%; } 
            60%  { padding-right: 80%; } 
            80%  { padding-right: 100%; }  
        }

    </style>
    <body>
        <div style="width:500px;height:20px;">
            <div id="process" class="process"></div>
        </div> 
    </body>
    <script type="text/javascript">
        setTimeout(function(){
            document.getElementById('process').className += ' processed';
        }, 4000);
    </script>

 

posted on 2018-05-15 20:05  hmyCheryl  阅读(276)  评论(0)  编辑  收藏  举报