2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill
和.bar-fill的span标签。
Plain
3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container {
width:30%
margin:0 auto
}
.title {
background:#545965
color:#fff
padding:15px
float:left
position:relative
-webkit-border-top-left-radius:5px
-webkit-border-bottom-left-radius:5px
-moz-border-radius-topleft:5px
-moz-border-radius-bottomleft:5px
border-top-left-radius:5px
border-bottom-left-radius:5px
}
4.首先建一个白色的背景
.bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px}
5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。
.bar-fill {
height:15px
display:block
background:#45c9a5
width:0
border-radius:8px
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。
@-webkit-keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {
height:15px
display:block
background:#e74c3c
width:0
border-radius:8px
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
追踪
Tracker
8.最后产生动画效果
.track-wrap {
position:relative
top:-18px
-webkit-animation:progressbar2 7s infinite
animation:progressbar2 7s infinite
}
.track {
height:20px
display:block
background:#e74c3c
width:20px
border-radius:10px
position:relative
left:-12px
}
@-webkit-keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
/* Standard syntax */
@keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
欢迎加我技术交流QQ群 ： 811956471
1.本示例中的特色是，纯css写的优惠券齿轮，和中间的虚线；
2.样式类.oilline 用css实现了,中间粗且高亮两端细的渐变线条；
3.css实现容器右上角旋转45度的圆角角标，再也不用ui切图了；
4.补充：由左向右，左边粗，向右渐变变细的线条：
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。
因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。
首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范：
.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
第二步，我们使用伪元素:after和:before来克隆2个同样大小的三角形。
.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
然后，我们在上述2个伪元素上分别应用不同的旋转变换：
.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}
这样我们就实现了一个五角星图形（图标）。我们可以用类似的方法实现更多的几何形状。
