效果图:(静态的哦)
CSS3样式代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.bg{ width:300px; height:50px; background-color:#f90; background-image:-webkit-gradient(linear,0 100%,100% 0, from(transparent),color-stop(.25,transparent), color-stop(.25,rgba(255,255,255,.1)),color-stop(.5,rgba(255,255,255,.1)), color-stop(.5,transparent),color-stop(.75,transparent), color-stop(.75,rgba(255,255,255,.1)),to(rgba(255,255,255,.1)) ), -webkit-gradient(linear,0 100%,0 0,from(#f54658),color-stop(.6,#ed1437),to(#f8989f)) ; background-image:-moz-linear-gradient(0 100% 45deg, transparent, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1) ), -moz-linear-gradient(0 100% 90deg,#f54658,#ed1437 60%,#f8989f) ; border-radius:25px; background-size:20px 20px,100% 100%; box-shadow:2px 1px 3px rgba(51,51,51,.3),0 -2px 2px rgba(255,255,255,.3) inset; -webkit-animation:progress .5s linear infinite; -moz-animation:progress .5s linear infinite; } @-webkit-keyframes progress{ from{background-position:0 0;} to{background-position:-20px 0;} } @-moz-keyframes progress{ from{background-position:0 0;} to{background-position:-20px 0;} } |
PS:请注意background-size这个属性:在上面的例子中有如下代码:
1 |
background-size:20px 20px,100% 100%; |
其中,background-size有两组参数,两组参数的设定值分别和background-image中的两组linear-gradient对应,即:20px 20px 对应第一组linear-gradient;100% 100%对应第二组 linear-gradient
jsfiddle.net在线预览/编辑地址
http://jsfiddle.net/huanmie913/GPRLd/css3animationprogress/
静态页面效果直接查看/下载
http://www.ffasp.com/plugs/css3/progress.htm
转载请注明:飞飞的个人网站 » CSS3动画之:滚动进度条