html+css：电池电量百分比效果图

最新推荐文章于 2024-11-18 10:00:17 发布

_小郭

最新推荐文章于 2024-11-18 10:00:17 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

文章标签： js jquery css html

本文链接：https://blog.youkuaiyun.com/qq_43033251/article/details/104600381

本文介绍了一个使用HTML、CSS和jQuery实现的电池电量动态显示效果。通过输入电池电量百分比，页面上的电池图标会实时更新其高度，直观地展示电量状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.container {
				height: 200px;
				width: 120px;
				position: relative;
				border: 1px solid pink;
				box-sizing: content-box;
				border-top: none;
			}
			
			.box {
				width: 120px;
				background-color: pink;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}
			
			.rela {
				position: relative;
				width: 100%;
				height: 100%;
			}
			
			.leftCon {
				width: 41px;
				height: 19px;
				position: absolute;
				left: -1px;
				top: 0;