html充电中效果图,HTML5 CSS3 单元素电池图标和充电动画

CSS

语言：

CSSSCSS

确定

body {

padding: 4em;

}

.battery {

color: #34495e;

border: 1px solid currentColor;

display: inline-block;

width: 20px;

height: 10px;

position: relative;

border-radius: 2px;

display: border-box;

margin: 5px;

transition: color 500ms;

}

.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%;

}