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

本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877306

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

有趣的进度条.gif

代码：

<!DOCTYPE html>
<!--html5与css3实例教程（第二版）第二章-->
<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>

公众号.png