html5 css3 电池电量,CSS3 液态电池充电动画

CSS

语言：

CSSSCSS

确定

@keyframes load {

0% {

top: 4.5rem;

}

70% {

top: 1.125rem;

}

90% {

top: 0;

}

95% {

top: 0;

}

100% {

top: 4.5rem;

}

}

@keyframes liquid-1 {

0% {

height: 0;

opacity: 0;

top: -0.5rem;

}

22% {

height: 0.28125rem;

top: 0.375rem;

opacity: 1;

}

25% {

top: -0.25rem;

}

35% {

height: 1.125rem;

top: -0.5rem;

}

55% {

height: 0.28125rem;

top: -0.125rem;

}

60% {

height: 0.61875rem;

opacity: 1;

top: -0.275rem;

}

96% {

height: 0.84375rem;

opacity: 0;

top: 0.5rem;

}

100% {

height: 0;

opacity: 0;

}

}

@keyframes liquid-2 {

0% {

height: 0;

opacity: 0;

top: -0.5rem;

}

17.5% {

height: 0.28125rem;

top: 0.2rem;

opacity: 1;

}

20% {

top: -0.25rem;

}

25% {

height: 1.40625rem;

top: -0.625rem;

}

45% {

height: 0.28125rem;

top: -0.125rem;

}

60% {

height: 1.40625rem;

opacity: 1;

top: -0.5rem;

}

96% {

height: 0.84375rem;

opacity: 0;

top: 0.5rem;

}

100% {

height: 0;

opacity: 0;

}

}

.battery {

display: inline-block;

position: relative;

width: 2.25rem;

height: 4.5rem;

box-shadow: 0 0 0 0.2rem #425C77;

background: white;

border-radius: 0.09rem;

}

.battery:before {

content: '';

position: absolute;

left: 0.5625rem;

right: 0.5625rem;

top: -0.3375rem;

height: 0.3375rem;

width: 1.125rem;

background: #425C77;

border-radius: 0.18rem;

}

.battery:after {

content: '';

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

border-right: 2.25rem solid transparent;

border-bottom: 4.05rem solid rgba(255, 255, 255, 0.325);

}

.liquid {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 2.25rem;

background: #71FB85;

animation: load 2.25s infinite;

}

.liquid:after,

.liquid:before {

content: '';

position: absolute;

top: -0.5rem;

height: 1.125rem;

width: 1.4625rem;

background: #71FB85;

border-radius: 50%;

opacity: 0;

}

.liquid:after {

right: 0;

animation: liquid-1 2.25s infinite;

}

.liquid:before {

left: 0;

animation: liquid-2 2.25s infinite;

}

body {

padding-top: 30vh;

background: #efefef;

text-align: center;

}

@keyframes power {

0% {

color: #bcbcbc;

}

75% {

color: #bcbcbc;

text-shadow: none;

}

90% {

color: #58fa70;

text-shadow: 0 0 0.8em #71FB85;

}

100% {

color: #bcbcbc;

text-shadow: none;

}

}

h5 {

font-family: Lato, sans-serif;

font-weight: 300;

letter-spacing: 0.025rem;

text-transform: uppercase;

color: #bcbcbc;

animation: power 2.25s infinite;

}