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

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 MOBILE MENU MENGGUNAKAN HTML DAN CSS

                              Disesi ini saya akan membagikan sedikit pengetahuan tentang cara membuat tampilan mobile menu menggunakan html dan css.Untuk Text editor disini saya menggunakan software visual studio code.anda bisa juga menggunakan software text  editor yang lain,seperti Notepad,Notepad++,Subleme text,atom dan yang lain-lain.Akan tetapi saya sangat merekomendasikan Software Visual Studio Code,karena memiliki fitur yang berbeda dari software Text editor yang lainnya dan juga sudah support berbagai macam bahasa pemrograman komputer yang lainnya.Selain itu software ini cocok untuk anda yang sedang belajar bahasa pemrograman komputer karena terdapat fitur yang dapat membantu anda dalam pengetikan coding,bahkan developer tingkat profesional pun menggunakan software Visual Studio Code.Anda dapat mendownload software Visual Studio Code di situs website resminya  https://code.visual...
Post a Comment
Read more

PENYAKIT DEGENERASI BUAH PINGGANG

                           Penyakit yang dinamai Degenerasi buah pinggang mungkin sekali disebabkan oleh keadaan dimana bangunan buah pinggang itu sendiri tersangkut dengan langsung atau oleh persediaan darah yang kurang kepada buah pinggang itu,sedangkan yang belakangan ini adalah biasanya disebabkan oleh pembuluh nadi yang mengeras (atteriosclerosis).Anggota-anggota tubuh biasanya mempunyai banyak tenaga cadangan dan penjagaan keselamatan yang agak luas,sehingga penyakit yang menimbulkan degenerasi itu sudah agak berjalan jauh sebelum ia menjadi nyata.Oleh sebab itu ,pada umumnya orang-orang yang sudah mencapai setengah umur dan orang-orang yang sudah lanjut usia yang mempunyai penyakit yang demikian dalam rupa yang nyata.               Satu pengertian tentang pekerjaan yang biasa dari buah pinggang akan menolong kita mengetahui beberapa diantara gejala-gejala,tanda-...
Post a Comment
Read more