CSS Battery Animation.Today in this blog , we gonna learn about CSS Battery Animation Effect for Beginners.
CSS Battery Animation Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Battery Animation Effect for Beginners. Button Border Animations, Button Neon Effects, and Button Hover Effects are one of the best attractive and clickable parts of the website. I already uploaded some Creative Animation if you're a beginner let's go and learn it.
This Battery Animation Effect is nice to develop our skills. In the previous blog, we will learn about CSS Apple Shop Website For Beginners if you're a beginner I will recommend to learn that website design first. If you're learned that and this blog will help you to learn about Battery Animation Effect. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css battery animation</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="battery">
<div class="box"></div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.battery{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 300px;
width: 150px;
border: 5px solid white;
border-radius: 10px;
box-shadow: 1px 1px 60px black;
}
.box{
position: absolute;
height: 30px;
width: 50px;
bottom: 100%;
background-color: white;
}
span{
height: 20%;
width: 95%;
margin: 5px;
border-radius: 10px;
animation: anime 4s linear infinite;
}
.battery::after{
content: '';
display: block;
position: absolute;
height: 100%;
width: 95%;
top: 0;
background-color: #262626FF;
animation: battery 4s linear infinite;
}
@keyframes anime{
0%{
background-color: red;
}
25%{
background-color: orange;
}
50%{
background-color: yellow;
}
100%{
background-color: limegreen;
}
}
@keyframes battery{
0%{
height: 100%;
}
20%{
height: 80%;
}
40%{
height: 60%;
}
60%{
height: 40%;
}
80%{
height: 20%;
}
100%{
height: 0%;
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clear in this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all Creative Animations to develop your CSS skills. Repeating the code for your practice will help you to learn this Battery Animation Effect more effectively and This video also helps you to learn faster. colourful Battery Animation Effect is one of my favourite CSS effects. I hope this tutorial will be helpful for learning Battery Animation for beginners. I will give you Source Code and you can download it.
COMMENTS