jquery+css实现电池电量进度显示效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现电池电量进度显示效果代码,点击加减可进行进度操作。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #000;
}
#hint {
color: #CCC;
font-family: Arial, sans-serif;
font-size: 19px;
line-height: 30px;
text-align: center;
letter-spacing: 1px;
display: none;
position: relative;
z-index: 10;
opacity: 0.75;
background: #000;
}
#buttons {
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -60px;
font-size: 73px;
color: #FFF;
width: 500px;
line-height: 120px;
vertical-align: middle;
}
#buttons .more,
#buttons .less {
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
cursor: pointer;
opacity: 0.5;
}
#buttons .more:hover,
#buttons .less:hover {
opacity: 1;
}
#buttons .less {
float: left;
}
#buttons .less:active {
color: #C00;
}
#buttons .more {
float: right;
}
#buttons .more:active {
color: #0C0;
}
#battery {
position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0