Skip to main content

MEMBUAT ANIMASI CHARGER BATERAI MENGGUNAKAN HTML & CSS

      

               

            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🙏😇😉

Labels:

Comments

Post a Comment

Popular posts from this blog

MENGGAMBAR KARTUN TOM & JERRY MENGGUNAKAN BAHASA PEMROGRAMAN PYHTON

                           Bahasa pemrograman pyhton merupakan suatu bahasa pemrograman komputer guna membantu pekerjaan lebih cepat dan mengintregasikan sistem anda lebih efektif.Pada topik pembahasan saat ini yaitu mengenai cara menggambar kartun Tom & jerry menggunakan bahasa pemrograman pyhton.               Ada beberapa persyaratan untuk menjalankan bahasa pemrograman pyhton diantaranya anda harus mempunyai software text editor dan Ekstensi Interpreter penerjemah bahasa pyhton ke dalam bahasa mesin.Dalam menjalankan bahasa pemrograman python ada beberapa software yang bisa anda gunakan seperti,Paycharm,Kite,Spyder,IDLE,Vs.code dan yang lain-lain.               Anda bisa saja memilih salah satu software yang ingin anda gunakan didalam penjelasan sebelumnya.Pada topik ini saya memilih software Vs.code dalam menjalankan per...
Post a Comment
Read more

MEMBUAT DIGITAL CLOCK DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN C++

                              Pembahasan kali ini akan mengulas tentang cara membuat Digital Clock dengan menggunakan bahasa pemrograman C++.Untuk menjalankan codingan atau programnya saya menggunakan software Dev C++.Saya menggunakan software ini karena sangat cocok untuk mengcompile serta menjalankan bahasa pemrograman c++.Jika anda belum memiliki software Dev C++ silahkan download di situs website resminya  https://sourceforge.net/projects/orwelldevcpp/ .               Setelah anda download silahkan install seperti software pada umumnya,Berikut tampilan atau gambar software Dev c++ setelah di install dan dibuka.                 Setelah anda buka software Dev C++ langkah selanjutnya adalah tuliskan code berikut ini: #include<iostream> #include<conio.h> #include<dos.h>  #include <win...
Post a Comment
Read more

MEMBUAT TAMPILAN NETWORK STATUS DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT

                                           Disesi ini saya akan membahas bagaimana cara membuat Network status atau status jaringan Online atau Offline dengan menggunakan bahasa pemrograman javascript.Langkah pertama yang anda lakukan adalah silahkan buka software text editor anda,seperti Notepad,Notepad++,Subleme Text,Atom,Visual studio code atau software text editor yang lain.               Dalam menjalankan codingan ini saya menggunakan text editor Visual studio code,mengapa saya memilih menggunakanSofware text editor Visual stuido code?.Karena software studio code memiliki beberapa keungulan daripada software text editor yang lainnya,selain itu Software Vs.code ini sudah support berbagai macam bahasa pemrograman komputer.Dan software yang satu ini sangat cocok digunakan untuk anda yang sedang belajar bahasa pemrogra...
Post a Comment
Read more