1、继续学习CSS，今天我做了一个进度条的例子，通过这个例子学习一些CSS的属性。学了这几天CSS的体会我也想说一下，学起来真的很无厘头，因为属性太多了，虽然语法简单，但想要做好一个特定的页面，真的很不容易。所以初学者还是找相似功能的例子，然后照着模仿，通过增删属性看出属性效果，记忆起来也容易，我目前还没找到更好的方法学习CSS。但只看属性的方式是不对的，还是要多加练习，理解CSS的精髓。

<-- 进度条的CSS代码 -->* {
       box-sizing: border-box;}html {
       height: 100%;}body {
       background: #efeeea;    background: linear-gradient(#f9f9f9, #cecbc4);    background: -moz-linear-gradient(#f9f9f9, #cecbc4);    background: -webkit-linear-gradient(#f9f9f9, #cecbc4);    background: -o-linear-gradient(#f9f9f9, #cecbc4);    color: #757575;    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    text-align: center;}h1, p {
       padding:0; margin:0;}.wrapper {
       width: 350px;    margin: 200px auto;}.wrapper .load-bar {
       width: 100%;    height: 25px;    border-radius: 25px;    background: #dcdbd7;    position: relative;    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2);}.wrapper .load-bar-inner {
       height: 60%;    width: 0%;    border-radius: inherit;    position: relative;        top: 5px;    background: #ffa042;    background: linear-gradient(#ffa042, #ffa042);    background: -moz-linear-gradient(#ffa042, #ffa042);    background: -webkit-linear-gradient(#ffa042, #ffa042);    background: -o-linear-gradient(#ffa042, #ffa042);    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);    animation: loader 10s linear infinite;    -moz-animation: loader 10s linear infinite;    -webkit-animation: loader 10s linear infinite;    -o-animation: loader 10s linear infinite;}.wrapper #counter {
       position: absolute;         background: #ffa042;    background: linear-gradient(#ffa042, #ffa042);    background: -moz-linear-gradient(#ffa042, #ffa042);    background: -webkit-linear-gradient(#ffa042, #ffa042);    background: -o-linear-gradient(#ffa042, #ffa042);    padding: 5px 10px;    border-radius: 0.4em;    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 2px 4px 1px rgba(0, 0, 0, 0.2),  0 1px 3px 1px rgba(0, 0, 0, 0.1);    left: -25px;    top: -50px;    font-size: 12px;    font-weight: bold;    width: 44px;    animation: counter 10s linear infinite;    -moz-animation: counter 10s linear infinite;    -webkit-animation: counter 10s linear infinite;    -o-animation: counter 10s linear infinite;}.wrapper #counter:after {
       content: "";    position: absolute;    width: 8px;    height: 8px;    background: #cbcbd3;    transform: rotate(45deg);    -moz-transform: rotate(45deg);    -webkit-transform: rotate(45deg);    -o-transform: rotate(45deg);    left: 50%;    margin-left: -4px;    bottom: -4px;    box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);    border-radius: 0 0 3px 0;}.wrapper h1 {
       font-size: 28px;    padding: 20px 0 8px 0;}.wrapper p {
       font-size: 13px;} @keyframes loader {
    from {width: 0%;}to {
       width: 100%;}} @-moz-keyframes loader {
    from {width: 0%;}to {
       width: 100%;}} @-webkit-keyframes loader {
    from {width: 0%;}to {
       width: 100%;}} @-o-keyframes loader {
    from {width: 0%;}to {
       width: 100%;}} @keyframes counter {
    from {left: -25px;}to {
       left: 323px;}} @-moz-keyframes counter {
    from {left: -25px;}to {
       left: 323px;}} @-webkit-keyframes counter {
    from {left: -25px;}to {
       left: 323px;}} @-o-keyframes counter {
    from {left: -25px;}to {
       left: 323px;}}

<-- 进度条HTML部分的代码 --> 
     
     
  
      
    
       
 
         
       
  
      
  
      
Loading
     

　　执行结果如图所示：

接下来我介绍一下这里我之前没用过的属性：

（1）linear-gradient--（线性渐变）

linear-gradient有三个参数，第一个表示线性渐变的方向，left 是从左到右，top 是从上到下，若是 left top，就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。

（2）animation动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当 @keyframes 中创建动画时，一定要把它捆绑到某个选择器，否则不会产生动画效果。

通过两项 CSS3 动画属性，能将动画绑定到选择器：1、规定动画的名称2、规定动画的时长

下面的表格是animation的属性值

属性	描述	CSS
	规定动画。	3
	所有动画属性的简写属性，除了 animation-play-state 属性。	3
	规定 @keyframes 动画的名称。	3
	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
	规定动画的速度曲线。默认是 "ease"。	3
	规定动画何时开始。默认是 0。	3
	规定动画被播放的次数。默认是 1。	3
	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
	规定动画是否正在运行或暂停。默认是 "running"。	3
	规定对象动画时间之外的状态。

 

 

 

 

 

 

 

 

 

这些属性我也说不清楚，所以还是把w3c上的属性给贴过来。