jquery+css实现电池电量进度显示效果代码

代码语言:html

所属分类:布局界面

代码描述:jquery+css实现电池电量进度显示效果代码,点击加减可进行进度操作。

代码标签: 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