前端进度条,利用背景颜色linear-gradient属性实现

最新推荐文章于 2024-05-09 20:59:01 发布

little_shallot

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量531

点赞数 3

分类专栏：小案例文章标签：前端 css3 javascript

本文链接：https://blog.csdn.net/little_shallot/article/details/124634458

版权

小案例专栏收录该内容

21 篇文章 2 订阅

订阅专栏

效果如下

1651912427468 00_00_00-00_00_30~1.gif

思路是利用linear-gradient属性制造条纹背景颜色 ,一共三个元素,最外层负责灰色灰色区域,第二层负责截取长度,第三次负责展示

间隙用和背景颜色相同的颜色,看似镂空,最里面的伪类主要负责渐变背景颜色,然后通过超出隐藏来控制

代码如下

<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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            background: rgb(1, 1, 46);
            height: 100vh;
        }

        .box {
            width: 1000px;
            height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to right, rgb(83, 83, 83) 75%, rgba(83, 83, 83, 0) 0);
            background-size: 10px 30px;
        }

        .content {
            width: 1000px;
            height: 30px;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 75%, rgb(1, 1, 46) 0);
            background-size: 10px 30px;
            position: relative;
        }

        .progress {
            overflow: hidden;
            width: 300px;
            height: 30px;
            transition: 1s;
        }

        .content::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 1px;
            bottom: 0;
            background: linear-gradient(90deg, #0785FE, #4FEAF9);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="progress" id="progress">
            <div class="content"></div>
        </div>
    </div>
    <script>
        const progress = document.getElementById('progress')
        const box = document.getElementById('box')
        const calculation = box.clientWidth / 100
        function go(e) {
            progress.style.width = e * calculation + 'px'
        }

    </script>
</body>

</html>

略微有点粗糙,小白一个,干不下去就回家喂猪

little_shallot

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端进度条,利用背景颜色linear-gradient属性实现

效果如下思路是利用linear-gradient属性制造条纹背景颜色 ,一共三个元素,最外层负责灰色灰色区域,第二层负责截取长度,第三次负责展示间隙用和背景颜色相同的颜色,看似镂空,最里面的伪类主要负责渐变背景颜色,然后通过超出隐藏来控制代码如下<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
复制链接

扫一扫