demo_动态滚动进度条

最新推荐文章于 2024-05-07 18:05:21 发布

林崖

最新推荐文章于 2024-05-07 18:05:21 发布

阅读量449

点赞数

分类专栏： HTML/CSS demo

本文链接：https://blog.csdn.net/CDTZYXZZY/article/details/99538727

版权

HTML/CSS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

demo

6 篇文章 0 订阅

订阅专栏

demo —— 动态滚动进度条

文章目录

demo —— 动态滚动进度条

效果

在这里插入图片描述

准备

animate动画
@keyframes 规则
background重复线性渐变：
```
background:repeating-linear-gradient(45deg,#99ccff 0px,#99ccff 15px,#0099cc 15px,#0099cc 30px);
```
#99ccff 0px #99ccff的起点
#99ccff 15px #99ccff 的终点
#0099cc 15px #0099cc 的起点
#0099cc 30px #0099cc 的终点

实现

代码：

<style>

        .progress-bar{
            width: 600px;
            height: 20px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border:1px solid #ccc;
            background-color: #dddddd;
            margin: 50px auto;
        }
        .progress-val{
            height: 20px;
            width: 400px;
            background:repeating-linear-gradient(45deg,#99ccff 0px,#99ccff 15px,#0099cc 15px,#0099cc 30px);
            background-size:42px 20px;
            /*background-repeat: no-repeat;*/
            background-position: 0 ;
            animation:progress 1s linear 0s infinite normal both;

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

        }
        
        

    </style>
</head>
<body>

<div class="progress-bar">

<div class="progress-val"></div>

</div>
</body>