css3实现进度条的模拟

两种进度条动画的实现：

　　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 ){
                       $( "#progress" ).addClass( "done" );
                   }
               }
           } );
       </script>
   </body>
</html>

转载于:https://www.cnblogs.com/charling/p/3644490.html

css3实现进度条的模拟相关推荐

html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码
特效描述:html5 css3 圆形进度条倒计时页面跳转代码.html5 css3进度条倒计时动画特效代码结构 1. HTML代码 html5+css3进度条倒计时动画特效 body { mar ...
两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
[CSS3]环形进度条
来源:https://codepen.io/eZ0/pen/eZXNzd 点击上面链接有源码有示例. .ko-progress-circle {width: 120px;height: 120px;b ...
css进度条动态显示,CSS3实现进度条动画
CSS 语言: CSSSCSS 确定 .cube { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 500px; h ...
9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的 ...
css3实现不同进度条
进度条类型1(渐变进度条) 效果1:图片实现进度条思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...
css3做渐变进度条
布局: <body><section class="container"><div class="loading-bar"> ...
超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
Linux中实现一个简单的进度条
说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的就是我们今天要说的进度条,进度条的模拟实现是挺简单的,但是要做的比较实用还是需要注意很多地方的,下来我就一步步的深入分 ...
C语言实现进度条彩色变化
[C语言]实现一个变色的进度条原创 2017年03月31日 20:39:30 标签: linux / C语言 / 376 编辑删除实现一个如上的进度条要求 1.依次多打印一个'#' 2.并后面 ...

css3实现进度条的模拟

css3实现进度条的模拟相关推荐

最新文章

热门文章