进度条加载效果

最新推荐文章于 2025-08-05 18:26:43 发布

富江¢

最新推荐文章于 2025-08-05 18:26:43 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_58235030/article/details/124790797

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .external{
        width: 200px;
        height: 20px;
        border-radius: 10px;
      }
      .inner{
        width: 20%;
        height: 100%;
        border-radius: 10px;
        background-color: #cdccf1;
        transition: width .5s;
      }
      .external:hover>.inner{
        width: 100%;
      }
    </style>
</head>
<body>
  <div class="external">
      <div class="inner">
      </div>
  </div>
</body>
</html>