Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

Pil Şarj Animasyon

Pil Şarj Animasyon

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;
}
Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com