实现进度条

最新推荐文章于 2023-12-21 09:46:53 发布

SC200203

最新推荐文章于 2023-12-21 09:46:53 发布

阅读量59

点赞数

分类专栏：动态网页项目开发文章标签： webview css sass

本文链接：https://blog.csdn.net/SC200203/article/details/124830609

版权

动态网页项目开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!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>进度条</title>

    <style>

        .bar {
            width: 150px;

            height: 15px;

            border: 1px solid red;

            border-radius: 6px;

            padding: 1px;

        }

       

        .bar_in {
            width: 50%;

            height: 100%;

            background-color: red;

            transition: all 0.5s;

        }

       

        .bar:hover .bar_in {
            width: 100%;

        }

    </style>

</head>

<body>

    <div class="bar">

        <div class="bar_in"></div>

    </div>

</body>

</html>

SC200203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现进度条

<!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.
复制链接

扫一扫