Pure CSS Batteries
A Pen by Peter Butcher on CodePen.
<div class="cell battery__happy"> | |
<div class="battery"> | |
<div class="face"></div> | |
<div class="acid"></div> | |
</div> | |
</div> | |
<div class="cell battery__sad"> | |
<div class="battery"> | |
<div class="face"></div> | |
<div class="acid"></div> | |
</div> | |
</div> |
Pure CSS Batteries
A Pen by Peter Butcher on CodePen.
// Battery properties | |
$b-width: 130px; | |
$b-height: 250px; | |
$b-margin: 4px; | |
$b-full: 220px; | |
$b-empty: 50px; | |
// Colours | |
$c-happy: #7FFF7F; | |
$c-sad: #FF7F7F; | |
@mixin flex-defaults { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
margin: auto; | |
} | |
html, body { | |
margin: 0; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
background-color: $c-happy; | |
} | |
.cell { | |
width: 100%; | |
height: 100%; | |
@include flex-defaults; | |
} | |
.battery__happy { | |
background-color: $c-happy; | |
.face { | |
border-color: $c-happy; | |
border-radius: 0px 0px 15px 15px; | |
background-color: $c-happy; | |
height: 10px; | |
animation: anim-happy 1.5s infinite; | |
&:before, &:after { | |
background-color: $c-happy; | |
} | |
} | |
.acid { | |
height: $b-full; | |
&:after { | |
background-color: $c-happy; | |
} | |
} | |
} | |
.battery__sad { | |
background-color: $c-sad; | |
.face { | |
border-color: #FFF transparent transparent transparent; | |
border-radius: 50%; | |
height: 30px; | |
animation: anim-sad 5s infinite; | |
&:before, &:after { | |
animation-delay: 1.3s; | |
background-color: #FFF; | |
} | |
} | |
.acid { | |
height: $b-empty; | |
&:after { | |
background-color: $c-sad; | |
} | |
} | |
} | |
.battery { | |
position: relative; | |
width: $b-width; | |
height: $b-height; | |
border: 4px solid #FFF; | |
border-radius: 25px; | |
margin: auto; | |
&:after { | |
position: absolute; | |
top: -18px; | |
left: 45px; | |
width: 40px; | |
height: 10px; | |
background-color: #FFF; | |
border-radius: 5px 5px 0px 0px; | |
content: ''; | |
} | |
} | |
.face { | |
z-index: 1; | |
margin: 100px auto 0px auto; | |
width: 30px; | |
border-style: solid; | |
border-width: 4px; | |
position: relative; | |
&:before, &:after { | |
top: -20px; | |
position: absolute; | |
content: ''; | |
width: 8px; | |
height: 8px; | |
border-radius: 50%; | |
animation: blink 10s infinite; | |
} | |
&:before { | |
right: 0px; | |
} | |
&:after { | |
left: 0px; | |
} | |
} | |
.acid { | |
display: block; | |
position: absolute; | |
bottom: 0; | |
width: calc(#{$b-width} - (2 * #{$b-margin})); | |
background-color: #FFF; | |
margin: $b-margin; | |
border-radius: 0px 0px 18px 18px; | |
&:before { | |
position: absolute; | |
top: -3px; | |
left: -1px; | |
width: 100px; | |
height: 25px; | |
background-color: #FFF; | |
content: ''; | |
border-radius: 50%; | |
transform: rotateZ(12deg); | |
} | |
&:after { | |
position: absolute; | |
top: -23px; | |
right: -1px; | |
width: 100px; | |
height: 25px; | |
content: ''; | |
border-radius: 50%; | |
transform: rotateZ(12deg); | |
} | |
} | |
@keyframes blink { | |
0% { | |
transform: scale(1, 1); | |
} | |
10% { | |
transform: scale(1, 1); | |
} | |
11% { | |
transform: scale(1, .1); | |
} | |
12% { | |
transform: scale(1, 1); | |
} | |
30% { | |
transform: scale(1, 1); | |
} | |
31% { | |
transform: scale(1, .1); | |
} | |
32% { | |
transform: scale(1, 1); | |
} | |
60% { | |
transform: scale(1, 1); | |
} | |
61% { | |
transform: scale(1, .1); | |
} | |
62% { | |
transform: scale(1, 1); | |
} | |
100% { | |
transform: scale(1, 1); | |
} | |
} | |
@keyframes anim-happy { | |
0% { | |
transform: rotateZ(-15deg); | |
} | |
50% { | |
transform: rotateZ(15deg); | |
} | |
100% { | |
transform: rotateZ(-15deg); | |
} | |
} | |
@keyframes anim-sad { | |
0% { | |
transform: rotateZ(0deg); | |
} | |
49% { | |
transform: rotateZ(0deg); | |
} | |
50% { | |
transform: rotateZ(0deg); | |
} | |
70% { | |
transform: rotateZ(-10deg); | |
} | |
90% { | |
transform: rotateZ(-10deg); | |
} | |
100% { | |
transform: translateX(0deg); | |
} | |
} |