【前端实例】css实现动态条纹背景进度条

 

【一、提出需求】

容器的背景拥有动态效果，看起来就像是在运动着

 

【二、思路】

结合以往的经验，动态效果其实就是从某一点到指定点或者说某一个值到指定值在指定时间内变化的过程。背景样式中涉及到位置只有 background-position

想要实现背景滚动有两种方式，第一种是通过导入背景图片然后令背景的位置不断发生变化，从而形成滚动效果；第二种就是通过不同颜色的混合令背景的位置不断发生变化。两种方法都有各自的好处和弊处，根据自己的情况和要求来选择。

 

【三、效果】

效果一：背景图片的滚动

效果二：纯色

 

【四、总结】

在制作条纹背景时，需要注意的一点就是每份色彩的占比和角度问题。例如，当背景高度为100px时，如果背景size设置为50px的时候，可以看到在没有设定background-repeat的时候，效果如下

从上面可以看到，当等分2份时斜边很难进行颜色的统一，将其等分为四份时，可以看到如下效果

代码：background-image: linear-gradient(-45deg,black 0,black 25%,white 0,white 50%,red 0,red 75%,blue 0,blue 100%); 

可以看到，蓝色对应白色、黑色对应红色。当我们将蓝色改为白色，红色改为黑色的时候，可以看到如下效果

代码：background-image: linear-gradient(-45deg,black 0,black 25%,white 0,white 50%,black 0,black 75%,white 0,white 100%);

 

额外知识

在制作条纹背景时，需要用到背景样式中的linear-gradient() 函数创建一个线性渐变的 "图像"，该CSS的语法如下

background: linear-gradient(direction, color-stop1, color-stop2, ...);
// direction    用角度值指定渐变的方向（或角度）。
// color-stop1, color-stop2,... 	用于指定渐变的起止颜色。

实例代码如下：

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */

注意：如果不指明渐变方向，则默认为从上往下