利用 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;
  }
}

你可能感兴趣的:(HTML,&,CSS,css,进度条,linear-gradient)