<div class="meter">
<span style="width: 25%"></span>
</div>
.meter {
height: 20px /* Can be anything */
position: relative
background: #555
-moz-border-radius: 25px
-webkit-border-radius: 25px
border-radius: 25px
padding: 10px
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)
}
.meter >span {
display: block
height: 100%
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
background-color: rgb(43,194,83)
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
)
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4)
position: relative
overflow: hidden
}
.orange >span {
background-color: #f1a165
background-image: linear-gradient(to bottom, #f1a165, #f36d0a)
}
.red >span {
background-color: #f0a3a3
background-image: linear-gradient(to bottom, #f0a3a3, #f42323)
}
.meter >span:after {
content: ""
position: absolute
top: 0left: 0bottom: 0right: 0
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
)
z-index: 1
background-size: 50px 50px
animation: move 2s linear infinite
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
overflow: hidden
}
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。transform
rotate
设置元素顺时针旋转的角度，用法是：
transform: rotate(x)
参数x必须是以deg结尾的角度数或0，可为负数表示反向。
scale
设置元素放大或缩小的倍数，用法包括：
transform: scale(a) 元素x和y方向均缩放a倍
transform: scale(a, b) 元素x方向缩放a倍，y方向缩放b倍
transform: scaleX(a) 元素x方向缩放a倍，y方向不变
transform: scaleY(b) 元素y方向缩放b倍，x方向不变
translate
设置元素的位移，用法为：
transform: translate(a, b) 元素x方向位移a，y方向位移b
transform: translateX(a) 元素x方向位移a，y方向不变
transform: translateY(b) 元素y方向位移b，x方向不变
skew
设置元素倾斜的角度，用法包括：
transform: skew(a, b) 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b
transform: skewX(a) 元素x方向逆时针倾斜角度a，y方向不变
transform: skewY(b) 元素y方向顺时针倾斜角度b，想方向不变
以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。
matrix
设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。
origin
设置元素的悬挂点，用法包括：
transform-origin: a b 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。
transition
transition-property
指定transition效果作用的CSS属性，其值是CSS属性名。
transition-duration
动画效果持续的时间，其值为以s结尾的秒数。
transition-timing-function
指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：
transition-delay
动画效果推迟开始执行的时间，其值为以s结尾的秒数。
CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系：
animation
CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下：
@keyframesNAME {
a% {
/*CSS属性*/
}
b% {
/*CSS属性*/
}
...
}
NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。
animation-name
指定选用的动画的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。
animation-direction
设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；
transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：
none 表示不做变换； <transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：
所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。
用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：
它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。
移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等
扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。
矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix
transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：
它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；
它是来设置过渡效果的速率，它有6种形式的速率：
它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；
它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：
animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。
它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：
它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：
和 transition-timing-function 类似：
它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：
它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：
它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：
它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：
关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。
