巧用CSS3之background渐变

巧用CSS3之background渐变常见斑马loading

上图是我们常见的loading进度条,以前都是用一张背景图片平铺的。其实如果抛去兼容性因素,我们可以用零图片纯样式来实现。

一,首先,我们先为容器定义一个纯蓝色背景:

box{ padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft Yahei", Simsun; font-size: 17px;">二,绘制条纹。

我们可以用linear-gradient来绘制条纹。在本例中,可以用半透明的白色背景来实现。

巧用CSS3之background渐变绘制条纹

box{background-image:linear-gradient(rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}

这样就形成了四等分的条纹,但这显然不是我们想要的结果。​

三,设定倾斜角度。

​linear-gradient是可以设定倾斜角度的。

box{background-image:linear-gradient(45deg, rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}​

巧用CSS3之background渐变

​这样貌似达到了我们的预期?其实不是的,现在是无论进度条有多宽,都是百分百填充,视觉上看到的都是四等分。当宽度变短时,同样是四等分,只是每一份都变窄了。

四,​设置固定尺寸

我们可以将原来背景图的相对宽度变成纯对尺寸。通过background-size来实现

​box{background-size:40px 40px}// 这里的值视实际情况而定。

这样,无论进度条宽度发生任何变化,都不会影响斑马条纹了。

如果想看实际的线上效果,​狠戳 http://loading.io/

另外,转载一篇瑶姐的关于backgound的文章:http://blog.doyoe.com/2016/04/11/css/background系列之无处不在的妙趣/#more

其实,只要敢于打破常规,​脑洞大开,就可以写出优雅,健壮,适应性强的代码。

上一篇:Java中Label的使用


下一篇:CSS3中background属性的调整