每日一点前端-6-html5+css3有意思的进度条

小咪咪 2021-06-24 16:11 371阅读 0赞

1.有趣的进度条,仅由css制作。

![2789632-e346de59918721b6.gif][]

有趣的进度条.gif

代码：

<!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>meter的使用</title>
        <style>
            /*meter的样式*/
            meter {
                cursor: pointer;
                /*-webkit-appearance: none;*/
                position: relative;
                display: block;
                margin: 8px auto;
                width: 100px;
                height: 17px;
                border-radius: 0px;
                padding: 4px 5px 4px 5px;
                box-sizing: border-box;
                /*background: rgba(255,2,188,0.5);*/
                -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,1);
                -webkit-transform-origin: center 8px;
            }
            meter::-webkit-meter-bar {
                background-color: hsl(200,10%,14%);
                background-size: 2px 5px;
                background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
                -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );
            }
    
    
            meter::-webkit-meter-optimum-value,
            meter::-webkit-meter-suboptimum-value,
            meter::-webkit-meter-even-less-good-value {
                background-size: inherit;
                background-image: inherit;
                -webkit-box-shadow: 0 0 10px 0px rgb(87,169,253);
                -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
            }
    
            meter::-webkit-meter-optimum-value { background-color:rgb(87,169,253); }
            meter::-webkit-meter-suboptimum-value { background-color:rgb(87,169,253); }
            meter::-webkit-meter-even-less-good-value { background-color:rgb(87,169,253); }
            meter:hover::-webkit-meter-optimum-value,
            meter:hover::-webkit-meter-suboptimum-value,
            meter:hover::-webkit-meter-even-less-good-value {
                width: 100% !important;
            }
        </style>
    </head>
    <body>
    <div class="meter">
        <meter class="meter-goal" min="0" max="100" value="30"></meter>
    </div>
    
    </body>
    </html>

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-e346de59918721b6.gif]: /images/20210615/5df38051e8974ab689639f601efa36c8.png
[2789632-3b18269684ea9294.png]: /images/20210615/b021c97e88aa489cb6f6f67514d4a997.png