Kali ini saya akan membuat codingan sederhana berupa animasi mencharger baterai hanya menggunakan HTML dan CSS saja.Disini saya menggunakan text editor Vs.code,bagi teman-teman yg belum mempunyai software tersebut,silahkan didownload di situs resmi Visual studio code.Vs code Merupakan salah satu text editor Yang free atau open source.Untuk tampilan software vs.code seperti dibawah ini:
Setelah Teman-Teman Mendownload dan menginstal Vs Code,selanjutnya Teman-Teman dapat Menuliskan coding berikut:
Untuk code HTML nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Battery_Charge_Animation</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<div class="battery">
<div class="battery-head"></div>
<div class="battery-body">
<i class="fas fa-bolt"></i>
<div class="charge"></div>
</div>
</div>
</body>
</html>
Untuk Code CSS nya:
:root {
--red: #ff0000;
--orange: #ff9100;
--yellow: #fff200;
--yellow-green: #d7fc03;
--green: #00ff00;
--black: #000000;
--gray: #9e9e9e;
--white: #ffffff;
}
@keyframes battery-bolt {
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes battery-charge {
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);
}
}
.battery {
margin-top: 5rem;
}
body {
width: 100vw;
height: 100vh;
background: #1e1e1e;
overflow: hidden;
}
.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: battery-bolt 2s linear infinite;
}
.charge {
width: 100%;
position: absolute;
bottom: 0;
border-radius: 14px;
animation: battery-charge 8s linear infinite;
}
Setelah anda memasukan codingan tersebut,silahkan disimpan terlebih dahulu dipenyimpanan yang anda inginkan,kemudian anda Run atau jalankan.Maka hasilnya seperti photo dibawah ini:
Selamat Belajar dan mencoba.semoga bermanfaat dan berguna untuk Teman-Teman Dimana pun berada.Akhir kata saya Mengucapkan Terimakasih atas kunjungan di Blog saya🙏😇😉
Comments
Post a Comment