css3實現進度條的模擬

時間 2019-12-14

標籤 css3 css 實現進度模擬欄目 CSS 简体版

原文原文鏈接

兩種進度條動畫的實現：javascript

　　一、css3，但IE9-不支持。css

　　二、js動畫，兼容性好，但沒有css3實現的順暢html

Demo：java

<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;css3

　　　　　　/*定義動畫完成時進度條的消失500ms內完成，而不是直接消失*/
               transition: opacity 500ms linear;
           }
           #progress{web

　　　　　　/*調用下面定義的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 ){
                       $( "#progress" ).addClass( "done" );
                   }
               }
           } );
       </script>
   </body>
</html>this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。