Bootrap条纹滚动动画进度条，css+js原生复刻。linear-gradient()+animation+transition

cfjcyc0301

已于 2022-11-08 16:49:09 修改

阅读量165

点赞数

文章标签： css javascript css3

于 2022-11-08 16:47:08 首次发布

本文链接：https://blog.csdn.net/cfjcyc0301/article/details/127753629

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes progress-move {
            0% {
                background-position: 200px 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        .progress {
            float: left;
            width: 0;
            height: 200px;
            background-image: linear-gradient(45deg, blue 25%, red 25%, red 50%, blue 50%, blue 75%, red 75%);
            background-size: 200px 200px;
            animation: progress-move 2s linear infinite;
            transition: all 6s ease;
        }
    </style>
</head>

<body>
    <div class="progress"></div>
    <script>
        let progress = document.querySelector('.progress')
        // 鼠标经过浏览器窗口就触发滚动条
        document.addEventListener('mouseenter', function () {
            progress.style.width = '1000px'
        })
    </script>
</body>

</html>

进度条最重要的是理解条纹怎么来的。background默认是repeat重复的，这里利用了重复特性。
以下代码是不重复和重复时的情况，单个方框是一个单位，是一个中心对称图形，不管怎么拼接都是完整的条纹。

当background-repeat: no-repeat

.progress {
            float: left;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            background-image: linear-gradient(45deg, blue 25%, red 25%, red 50%, blue 50%, blue 75%, red 75%);
            background-size: 200px 200px;
            background-repeat: no-repeat;
            /* animation: progress-move 2s linear infinite; */
            /* transition: all 6s ease; */
        }

当个方框，如果background-repeat: repeat 那么就是一整个条纹条了
当background-repeat: repeat

.progress {
            float: left;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            background-image: linear-gradient(45deg, blue 25%, red 25%, red 50%, blue 50%, blue 75%, red 75%);
            background-size: 200px 200px;
            background-repeat: repeat;
            /* animation: progress-move 2s linear infinite; */
            /* transition: all 6s ease; */
        }