CSS实现不同状态的电池电量图

前端晚自习

已于 2024-04-25 16:09:58 修改

阅读量350

点赞数 5

分类专栏：前端 CSS 文章标签： css 前端

于 2024-04-25 16:03:09 首次发布

本文链接：https://blog.csdn.net/weican57/article/details/138191984

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

效果图

QQ截图20240425153947.png QQ截图20240425154047.png QQ截图20240425154115.png

代码

<!-- 红色：battery-danger,黄色：battery-warning -->
<div class="battery" title="80%">
    <i class="iconfont iconfont-dianliang"></i>
    <div class="battery-progress">
      <div class="battery-progress__value" style="width: 80%"></div>
    </div>
</div>

.battery {
    position: relative;

    i {
      color: #67c23a;
      font-size: 32px;
    }

    &-progress {
      position: absolute;
      left: 5px;
      right: 9px;
      top: 14px;
      bottom: 14px;
      overflow: hidden;

      &__value {
        background: #67c23a;
        height: 100%;
      }
    }

    &-danger {
      i {
        color: #f56c6c;
      }

      .battery-progress {
        &__value {
          background: #f56c6c;
        }
      }
    }

    &-warning {
      i {
        color: #e6a23c;
      }

      .battery-progress {
        &__value {
          background: #e6a23c;
        }
      }
    }
}