您的位置: 首页  >  IT文章  >  CSS3打造超酷的可控制以百分比显示的进度条效果

CSS3打造超酷的可控制以百分比显示的进度条效果

分类: IT文章 • 2024-11-12 12:19:12
CSS3制作超酷的可控制以百分比显示的进度条效果

虽然不是大神，但是今天还要分享一下，当然对初学者可以看下。手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，演示效果可以参考这个 《CSS实现进度条和订单进度条》， 但是呢，那篇博客只是制作出来效果而已，并没有动画效果，因为当时正期末复习期间，所以就省了制作动画的时间成本。所以，今天就一起把各种效果都实现吧！
先看一下效果图，会提升我们的学习兴趣哟：
CSS3打造超酷的可控制以百分比显示的进度条效果

好的，我将按照此图从上到下的顺序讲解，由于第一和第二种效果之气那篇博客《 CSS实现进度条和订单进度条 》已经介绍过怎么做的了，这里就把重心放在动画上面， 对于圆形效果是重点，我将详细讲解。
第一种效果：
html结构：

<div id="progress">
      <span></span>
</div>

css样式：

#progress{
	width: 50%;
	height: 30px;
	border:1px solid #ccc;
	border-radius: 15px;
	margin: 50px 0 0 100px;
	overflow: hidden;
	box-shadow: 0 0 5px 0px #ddd inset;
}
#progress span {
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #2989d8; /* Old browsers */
	background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
	background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-size: 60px 30px;
	text-align: center;
	color:#fff;
	-webkit-animation:load 3s ease-in;
}
@-webkit-keyframes load{
	0%{
		width: 0%;
	}
	100%{
		width:100%;
	}
}



可以看到其实这种进度条的动画是最容易实现的，根据具体进度百分比设置默认的width百分比和动画里100%处的width百分比就行了，比如说，我想实现70%的进度条动画效果，那么我只需要修改一下两处地方：

#progress span{
	width: 70%;
}
@-webkit-keyframes load{
	  0%{
		width: 0%;
	  }
	100%{
		width:70%;
	  }
}


那所有的源码我都贴出来，大家直接复制就可以用：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二当家的素材网CSS3+jquery制作的超酷进度条效果</title>

  <link rel="stylesheet" href="stylesheets/ui.css">
  <link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
  <link media="only screen and (max-device-width: 480px)" href="stylesheets/ios.css" type="text/css" rel="stylesheet" />
</head>
<body>
  
  <div id="container">
    
    <div class="content">
      <h1><a href="http://ivan.ly/ui/" title="Pure CSS Progress Bar">Pure CSS Progress Bar</a></h1>
    </div>
    <!-- Progress bar -->
    <div id="progress_bar" class="ui-progress-bar ui-container">
      <div class="ui-progress" style="width: 79%;">
        <span class="ui-label" style="display:none;">正在加载...<b class="value">79%</b></span>
      </div>
    </div>
    <!-- /Progress bar -->
    
    <div class="content" id="main_content" style="display: none;">
      <p>
        Inspired by a shot from <a href="http://dribbble.com/shots/33322-Modal-upload">Jonno Riekwel</a>, I knocked up a quick <a href="http://dribbble.com/shots/55908-Progress-Bar">Progress Bar</a> in Photoshop on a friday afternoon before heading to the pub.
      
        Then a couple of people suggested implementing it with CSS.
      </p>
      
      <p>
        So I did.
      </p>
      
      <p>
        Enjoy,<br>
        <a href="http://dribbble.com/players/ivan">Ivan Vanderbyl</a>
      </p>
      
      <p class="small">
        This is best viewed in a Webkit based browser, <a href="http://google.com/chrome" rel="nofollow">Chrome</a> is good*, also Safari. Opera 10.62+ looks ok, however it doesn't support gradients. Firefox and IE 9 kind of work (no stripe animation). IE 8, 7 and 6 do not support rounding, shadows, animation, or much else for that matter, in fact they are pretty bloody useless at being browsers.
      </p>
      
      <p class="small">
        * There is a <a href="http://code.google.com/p/chromium/issues/detail?id=29427" title="Inset box shadow escapes content when border radius present">known issue</a> with Chrome for Windows and Linux which will cancel out the rounded corners due to the use of inset box shadow. Because I use a Mac this is not regarded as an issue.
      </p>
            
    </div>
    
  </div>

  <script src="javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="javascripts/progress.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

 

相关推荐