div+css实现手机电池充电动画效果代码-html代码-BFW代码库

div+css实现手机电池充电动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现手机电池充电动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
/**
  * battery
  * a stepped battery indicator
  * @author jh3y
*/
.battery {
  height: 150px;
  width: 100px;
  background: transparent;
  border-radius: 2px;
  border: 5px solid var(--primary);
  position: relative;
}
.battery:before {
  content: "";
  height: 30px;
  width: 50px;
  background: var(--primary);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 2px;
}
.battery:after {
  -webkit-animation: battery-charge 1s infinite steps(6);
          animation: battery-charge 1s infinite steps(6);
  background: linear-gradient(0deg, transparent, transparent 5%, var(--primary) 5%, var(--primary) 19%, transparent 19%, transparent 24%, var(--primary) 24%, var(--primary) 38%, transparent 38%, transparent 43%, var(--primary) 43%, var(--primary) 57%, transparent 57%, transparent 62%, var(--primary) 62%, var(--primary) 76%, transparent 76%.........完整代码请登录后点击上方下载按钮下载查看