现代 CSS

progress bar

CSS3 Loading Bar

CSS3 Loading Bar
CSS3制作一个类似于文件Loading的效果,在这里没有写动画效果,主要考虑文件加载对应的文本,css实现效果会有难度。在这个DEMO中主要运用了四个知识点:第一是google font api,用来制作特殊的英文字体效果;第二个是使用CSS的渐变,制作了渐变的面板效果;第三使用box-shadow,制作面板之类的描边效果;第四就是使用border-radius制作圆角效果。

css3进度条动画

css3进度条动画
这个进度条是应用css3的渐变背景做出来的,然后应用background-size属性设置大小,然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画,然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理,我们再来研究动画部分,背景图片的运动,当然是用background-position了。
返回顶部