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