条形进度条动画效果

最新推荐文章于 2024-03-05 09:39:29 发布

Wild～～

最新推荐文章于 2024-03-05 09:39:29 发布

阅读量143

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/xiao970615/article/details/129015293

版权

效果图

比较简单，直接上全部代码了

<!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>
</head>

<body>
    <div class="div1">
        <div></div>50%
    </div>

    <style>
        body {
            background-color: #04213c;
        }
        .div1 {
            /* X轴旋转20度 */
            transform: skew(-20deg, 0);
            width: 1015px;
            height: 50px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            color: aliceblue;
            font-size: 18px;
            font-weight: bold;
        }
        .div1 > div {
            width: 50%;
            height: 100%;
            /* 连续渐渐线变: repeating-linear-gradient() */
            background: repeating-linear-gradient( 
                /* 角度 */
                90deg, 
                /* 渐变的依次颜色 */
                green 0px,
                green 10px,
                transparent 10px,
                transparent 15px);
        }
    </style>
</body>

</html>