利用 linear-gradient 函数实现炫酷的动态进度条
linear-gradient 函数
linear-gradient 是可以用来创建颜色线性渐变效果的一个函数
语法：
background-image: linear-gradient(deg, color...)
第一个参数为渐变的方向或角度，第二个参数为渐变颜色
颜色百分比
background-image: linear-gradient(to right bottom, red 25%, blue 75%)
0 - 25% 为纯红色，25% - 75% 为红色渐变到蓝色，渐变中心在50%，75% - 100% 为纯蓝色
background-image: linear-gradient(to right bottom, red 25%, 40%, blue 75%)
0 - 25% 为纯红色，25% - 75% 为红色渐变到蓝色，渐变中心在40%，75% - 100% 为纯蓝色
background-image: linear-gradient(to right bottom, red 25%, blue 25%, blue 75%, red 75%)
0 - 25% 为纯红色，25% - 75% 为纯蓝色，75% - 100% 为纯红色
进度条效果
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>利用 linear-gradient 函数实现进度条title>
head>
<body>
<div class="progress">div>
body>
html>
.progress {
border-radius: 5px;
height: 20px;
background-image: linear-gradient(to right bottom,
transparent 25%, rgba(255,255,255,.3) 25%, rgba(255,255,255,.3) 50%,
transparent 50%, transparent 75%, rgba(255,255,255,.3) 75%);
background-size: 20px;
background-color: lightgreen;
animation: move 1s linear infinite forwards;
}
@keyframes move {
100% {
background-position: 100px;
}
}