🔋pure CSS Battery Charging Animation Effect | Charging Animation Using HTML & CSS Only
🌟 Please leave a LIKE 😍 and SUBSCRIBE for more AMAZING content! 🌟
In this video, we are going to create a charging animation using just HTML and CSS. We will be using the power of CSS transitions and animations to create a smooth and elegant animation.
If you're looking for a quick and easy way to create a charging animation, then this is the video for you! By the end of this tutorial, you will have learned how to create a battery-charging animation using only HTML and CSS.
📝 CREATOR: Ma Ýes
⌚ Timestamps:
00:01 - Demo
00:14 - Start
00:52 - Root (CSS start)
03:37 - batteryBolt Animation
04:04 - batteryCharge Animation
04:47 - Result
PRODUCED BY: BEAT_26
✅ music credit
• No copyright Nepali music ||Suntalim...
🤝Get in touch with me :
LinkedIn - / mayes243
GitHub - https://github.com/mayes243
▶️ PLAYLIST:
Udemy clone: • Udemy Clone (Project Setup) part 1 us...
🏷️ Tags:
#animation
#battery
#htmlandcss
#html
#css
SOURCE CODE:
:root {
--red: #ff0000;
--orange: #ff9100;
--yellow: #fff200;
--yellow-green: #d7fc03;
--green: #00ff00;
--blue: #0000ff;
--black: #000000;
--gray: #9e9e9e;
--white: #ffffff;
}
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(var(--yellow-green), var(--orange));
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.battery-head {
width: 30px;
height: 10px;
background: var(--black);
margin: 0 auto;
border: 4px solid var(--gray);
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.battery-body {
width: 100px;
height: 200px;
background: var(--black);
position: relative;
margin: 0 auto;
border: 4px solid var(--gray);
border-radius: 18px;
}
i.fa-bolt {
color: var(--white);
font-size: 40px;
position: absolute;
left: 38%;
top: 40%;
z-index: 1;
animation: batteryBolt 2s linear infinite;
}
@keyframes batteryBolt {
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.charge {
width: 100%;
position: absolute;
bottom: 0;
border-radius: 14px;
animation: batteryCharge 8s linear infinite;
}
@keyframes batteryCharge {
0% {
height: 0%;
background: var(--red);
}
25% {
height: 25%;
background: var(--orange);
}
50% {
height: 50%;
background: var(--yellow);
}
75% {
height: 75%;
background: var(--yellow-green);
}
100% {
height: 100%;
background: var(--green);
}
}
🔎 Related Queries...
phone charging animation using css,battery charging animation using css,animation on hover using css,animate on hover,loading screen animation,css animation,css charging battery animation,battery animation,css tutorial,web development,battery charging animation,css effects,charging effect,animation,charging animation,css3 tutorial,css3 tutorial for beginnersuse of css in html,animation in css3,animation in css and html,html animation,css animation
css charging battery animation
battery animation
css tutorial
web development
css art
battery charging animation
html
js
css animation and effects
css effects
css buttons
Смотрите видео 🔋pure CSS Battery Charging Animation Effect | Charging Animation Using HTML & CSS Only онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Savvy Programmer 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 33 раз и оно понравилось 1 людям.