微信小程序--电池容量、电池剩余电量样式

ColorKin

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-05-07 06:09:27 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

CSS实现不同状态的电池电量图使用CSS实现电池不同状态的电量图效果，低电量红色、省电模式橘黄色、正常状态绿色等三种颜色..... 阅读详情

效果如图所示：竖列的我用的旋转横列90度实现的

wxml:

</view>

</view>

wxss:

.battery {

color: #34495e;

border: 1px solid currentColor;

display: inline-block;

width: 50px;

height: 20px;

position: relative;

border-radius: 2px;

display: border-box;

margin: 5px;

}

.battery::before,

.battery::after {

content: "";

position: absolute;

}

.battery::before {

top: 2px;

bottom: 2px;

right: -3px;

width: 1px;

display: border-box;

border: 1px solid currentColor;

border-left: 0;

}

.battery::after {

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: 1px;

border-radius: 1px;

background-color: currentColor;

transition: right 500ms;

}

.battery.low {

color: #c0392b;

}

.battery.low::after {

right: 80%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery.med {

color: #f39c12;

}

.battery.med::after {

right: 40%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery.full {

color: #27ae60;

}

.battery[data-charge='0'],

.battery[data-charge='1'],

.battery[data-charge='2'],

.battery[data-charge='3'] {

color: #c0392b;

}

.battery[data-charge='4'],

.battery[data-charge='5'],

.battery[data-charge='6'] {

color: #f39c12;

}

.battery[data-charge='7'],

.battery[data-charge='8'],

.battery[data-charge='9'],

.battery[data-charge='10'] {

color: #27ae60;

}

.battery[data-charge='0']::after {

right: 100%;

}

.battery[data-charge='1']::after {

right: 85%;

}

.battery[data-charge='2']::after {

right: 80%;

}

.battery[data-charge='3']::after {

right: 70%;

}

.battery[data-charge='4']::after {

right: 60%;

}

.battery[data-charge='5']::after {

right: 50%;

}

.battery[data-charge='6']::after {

right: 40%;

}

.battery[data-charge='7']::after {

right: 30%;

}

.battery[data-charge='8']::after {

right: 20%;

}

.battery[data-charge='9']::after {

right: 10%;

}

.battery[data-charge='10']::after {

right: 0%;

}

/*纵向*/

.battery1 {

color: #34495e;

border: 1px solid currentColor;

display: inline-block;

width: 50px;

height: 20px;

position: relative;

border-radius: 2px;

display: border-box;

margin: 30px;

transform: rotate(-90deg);

/* transition: color 500ms; */

}

.battery1::before,

.battery1::after {

content: "";

position: absolute;

}

.battery1::before {

top: 2px;

bottom: 2px;

right: -3px;

width: 1px;

display: border-box;

border: 1px solid currentColor;

border-left: 0;

}

.battery1::after {

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: 1px;

border-radius: 1px;

background-color: currentColor;

transition: right 500ms;

}

.battery1.low {

color: #c0392b;

}

.battery1.low::after {

right: 80%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery1.med {

color: #f39c12;

}

.battery1.med::after {

right: 40%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery1.full {

color: #27ae60;

}

.battery1[data-charge='0'],

.battery1[data-charge='1'],

.battery1[data-charge='2'],

.battery1[data-charge='3'] {

color: #c0392b;

}

.battery1[data-charge='4'],

.battery1[data-charge='5'],

.battery1[data-charge='6'] {

color: #f39c12;

}

.battery1[data-charge='7'],

.battery1[data-charge='8'],

.battery1[data-charge='9'],

.battery1[data-charge='10'] {

color: #27ae60;

}

.battery1[data-charge='0']::after {

right: 100%;

}

.battery1[data-charge='1']::after {

right: 85%;

}

.battery1[data-charge='2']::after {

right: 80%;

}

.battery1[data-charge='3']::after {

right: 70%;

}

.battery1[data-charge='4']::after {

right: 60%;

}

.battery1[data-charge='5']::after {

right: 50%;

}

.battery1[data-charge='6']::after {

right: 40%;

}

.battery1[data-charge='7']::after {

right: 30%;

}

.battery1[data-charge='8']::after {

right: 20%;

}

.battery1[data-charge='9']::after {

right: 10%;

}

.battery1[data-charge='10']::after {

right: 0%;

}

收录于

微信小程序

无线追踪设备实战：从BLE+GPS到Wi-Fi定位与低功耗设计在物联网与智能硬件快速普及的今天，无线追踪设备已成为资产防盗、宠物防丢、物流追踪等场景的核心组件。这类嵌入式终端融合定位、通信、传感与电源管理技术，借助BLE、GPS、Wi-Fi扫描及蜂窝网络实现位置感知与数据传输。理解不同定位技术的原理与权衡是设计高可靠产品的关键：GPS适合室外开阔环境，Wi-Fi指纹适合室内，BLE则以极低功耗支撑短距交互。与此同时，功耗预算与状态机设计直接决定续航能力，是产品能否落地的决定性因素。从需求拆解、硬件选型、天线匹配到固件协议、云端协同，无线追踪设备的开发需要系统化工程思维阅读详情

微信小程序--电池容量、电池剩余电量样式

相关推荐