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%;} }