Bu HTML ve CSS kodu, pil şarjını temsil eden bir animasyon oluşturur. Pil görselini ve şarj seviyesini gösteren bir şeridi içerir. CSS ile yapılandırılan animasyon, şarj seviyesini yavaşça yükselterek ve alçaltarak gerçek zamanlı bir şarj süreci görüntüsü oluşturur. Kullanıcılar, bu animasyon sayesinde pilin dolma ve boşalma durumunu görsel olarak takip edebilirler. Animasyonun özellikleri, ihtiyaçlara göre ayarlanabilir ve kullanılacak pil görseli de değiştirilebilir.
Bu kod parçacığı, pilin şarj sürecini canlandıran bir animasyon oluşturarak, kullanıcıya görsel bir şekilde pilin şarj seviyesini aktarır. Animasyonun süresi, stil özellikleri gibi detaylar, ihtiyaçlara göre özelleştirilebilir.
İçerik dosyalarına ve görsellerine Github adresimden ulaşabilirsiniz.
Kişisel adresimden de bana ulaşabilirsiniz. Sinan Özdemir
<!DOCTYPE html>
<html>
<head>
<title>Sinan Özdemir | Pil Yüzdesi </title>
<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/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>:root{
--red:#ff0000;
--orange:#ff9100;
--yellow:#fff200;
--yellow-green:#d7fc03;
--green:#00ff00;
--black:#000000;
--gray:#9e9e9e;
--white:#ffffff;
}
body{
width: 100vw;
height: 100vh;
background: var(--black);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@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);}
100%{height: 100%; background: var(--green);}
}
.battery-head{
width: 30px;
height: 10px;
background: var(--black);
margin: 0 auto;
border: 4px solid var(--white);
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.battery-body{
width: 100px;
height: 200px;
background: transparent;
position: relative;
margin: 0 auto;
border: 4px solid var(--white);
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;
z-index: -1;
}