需要实现的效果:
如果不看讲解,可直接拉最底下
看最后代码
目标进度条,背景是淡蓝色,上面平铺了一层倾斜的深蓝色条状矩形。我们可以这样写:
//css部分
.box{
width:200px;
height:30px;
background: -webkit-linear-gradient(0deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
}
//html部分
<div class="box"></div>
提示:这里用到了线性渐变 -webkit-linear-gradient(逆时针倾斜的角度, 颜色值 开始的位置, 颜色值 开始的位置,颜色值 开始的位置, 颜色值 开始的位置);
第一个参数除了使用倾斜角度,还可以使用“top right bottom left”,颜色值开始的位置可以用px也可以用百分数。感兴趣的可以仔细研究一下这个属性,可以制作出各种各样的神奇效果哦。
首先,我们在0-10px之间绘制了一个深蓝色的矩形条,接着又在10-20px之间绘制了一个淡蓝色的矩形条,浏览器默认将淡蓝色向后填充。
现在,我们希望将深蓝和浅蓝相间的矩形条重复绘制。只要修改下面一个属性即可。
-webkit-linear-gradient 线性渐变
-webkit-repeating-linear-gradient重复线性渐变
background: -webkit-repeating-linear-gradient(0deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
大概的形状已经有啦,修改倾斜角度逆时针旋转30度
background: -webkit-repeating-linear-gradient(30deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
动起来
现在让它动起来。这个时候我们可以用到CSS3的keyframe属性,来改变box的背景的位置,让它自动运动。因此,box的长度需要增加,同时需要一个盒子来使box超出的部分隐藏掉。
.wrap{
width: 200px;
height: 30px;
border-radius: 15px;
margin: 40px;
overflow: hidden;
}
.box{
width:400px;
height:30px;
background: -webkit-repeating-linear-gradient(30deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
-webkit-animation: move 5s linear infinite;
}
.text{
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
color: #ece8e8;
font-family: arial;
}
@-webkit-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: -200px 0;
}
}
<div class="wrap">
<div class="box">
</div>
</div>
<div class="wrap">
<div class="box">
<div class="text">LOADING...</div>
</div>
</div>
完成!