css3实现进度条的模拟

全栈程序员站长

发布于 2021-12-23 13:41:45

4940

发布于 2021-12-23 13:41:45

文章被收录于专栏：全栈程序员必看

两种进度条动画的实现：

　　1、css3，但IE9-不支持。

　　2、js动画，兼容性好，但没有css3实现的顺畅

Demo：

<html>
    <head>
        <title>progress</title>
        <script type=”text/javascript” src=”../jQuery1.7.js”></script>
        <style type=”text/css”>
            body{
 
                margin: 0;
            }
            #progress{
 
                height: 2px;
                background: #b91f1f;
　　　　　　/*定义动画完成时进度条的消失500ms内完成，而不是直接消失*/
                transition: opacity 500ms linear;
            }
            #progress{
 
　　　　　　/*调用下面定义的progress动画，规定动画3s内完成*/ 
                -webkit-animation: progress 3s;
                animation: progress 3s;
            }
            #progress.done{
 
                opacity: 0;
            }
            @-webkit-keyframes progress{
 
                0%{
 
                    width: 0px;
                }
                100%{
 
                    width: 100%;
                }
            }
            @keyframes progress{
 
                0%{
 
                    width: 0px;
                }
                100%{
 
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div id=”progress”>
        </div>
        <script type=”text/javascript”>
　　　　// 第一次见这种使用方式，定义一个对象，并为其属性值定义动画            ( {property : 0} ).animate( {property : 100}, {                  duration : 3000,                step :  function(){                      var percentage = Math.round( this.property );                    ( “#progress” ).css( “width”, percentage + “%” );                    if( percentage == 100 ){

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年8月28日，如有侵权请联系 cloudcommunity@tencent.com 删除

css3