css---应用实例之加载进度条

css—应用实例之加载进度条
css—应用实例之加载进度条链接
1.整体结构：ul—li—bar&文字
2.设计：
body背景色
ul的样式改为无；设置宽度；位置为relative（相对的），便于子元素调整；调整行高，文本之间有距离。
li渐变颜色，圆角，阴影效果，总体使得看上去像是凹进去一样。
文字放上面
bar 绝对定位，设置高度，圆角，阴影
分别的样式：设置宽度，动画，背景颜色，背景图片为渐变色
3.值得一提的css效果！！（紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。标准语法一定要放在他们后面！ 这里我只写标准语法~ 懒哈哈哈）
渐变颜色：
通常为background-image: linear-gradient([direction,] color-stop1, color-stop2, …);
direction为角度，从什么位置开始进行线性渐变，不指定位置，默认从左边开始渐变例如：
background-image: linear-gradient(left, red , blue);/标准语法/
background-image: linear-gradient(to bottom right, red , blue);/标准语法/
background-image: linear-gradient(#f0bb4b, #d9aa44);/标准语法/
阴影效果：
box-shadow: h-shadow v-shadow [blur spread color inset];
h-shadow：水平阴影的位置
v-shadow：垂直阴影的位置
blur：模糊距离
spread:阴影大小
color：阴影颜色
inset：从外层的阴影改变阴影内侧阴影。默认为outset，外侧阴影。

动画效果：
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
语法：
先绑定选择器：animation:sameName 2s;/标准语法/
@keyframes规矩，即创建动画，规定开始到结束的样式：@keyframes sameName { 0% { width:0px;} 100%{ width:80%;} }