利用 linear-gradient 函数实现炫酷的动态进度条

最新推荐文章于 2023-01-29 11:43:48 发布

落落叶叶无声

最新推荐文章于 2023-01-29 11:43:48 发布

阅读量943

点赞数 1

分类专栏： HTML & CSS 文章标签： css 进度条 linear-gradient

本文链接：https://blog.csdn.net/u012557814/article/details/113732766

版权

HTML & CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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% 为纯红色

进度条效果

<!DOCTYPE html>
<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;
  }
}

落落叶叶无声

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用 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
复制链接

扫一扫

专栏目录