长方形和梯形横向动态滚动条

最新推荐文章于 2024-11-04 23:25:00 发布

范范_

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量137

点赞数 1

本文链接：https://blog.csdn.net/qq_40853132/article/details/125594945

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 1 订阅

订阅专栏

第一种：长方形横向动态滚动条

效果如下所示，想象成动态的
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向动态滚动条</title>
</head>
<style>
    .progress-bar {
      height: 20px;
      width: 400px;
      border-radius: 5px;
      border: 1px solid #ccc;
      background: #ddd;
      margin: 50px auto;
    }
    .progress-val {
      height: 20px;
      width: 400px;
      background: repeating-linear-gradient(135deg, #416dff 0px, #416dff 15px, #2743a9 15px,#2743a9 30px);
      background-size: 42px 20px;
      animation: progress-striped 500ms linear 0s infinite normal both;
    }
    @keyframes progress-striped {
      from { background-position: 42px 0px; }
      to { background-position: 0px 0px; }
    }

</style>
<body>
    <div class="progress-bar">
        <div class="progress-val">
        </div>
    </div>
</body>
</html>

第二种：梯形横向动态滚动条

效果如下所示，想象成动态的
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态滚动条</title>
</head>
<style>
    .progress-bar {
	    width: 200px;
	    height: 0px;
	    border-top: 0px solid;
	    border-left: 4px solid transparent;
	    border-right: 4px solid transparent;
	    transform: perspective(3em) rotateX(15deg);
	    text-align: center;
	}

  .progress-val {
    height: 15px;
    width: 200px;
    background: repeating-linear-gradient(135deg, #416dff 0px, #416dff 15px, #2743a9 15px, #2743a9 30px);
    background-size: 42px 15px;
    animation: progress-striped 500ms linear 0s infinite normal both;
  }

  @keyframes progress-striped {
    from {
      background-position: 42px 0px;
    }

    to {
      background-position: 0px 0px;
    }
  }

</style>
<body style="margin: 100px 600px;">
    <div class="progress-bar">
        <div class="progress-val">
        </div>
    </div>
</body>
</html>