--> Skip to main content
Light
Dark
System
Beranda animasi bendera

CSS Animasi Bendera Kemerdekaan Indonesia 77 Tahun

Admin Roni
animasi bendera Komentar
CSS Animasi Bendera Kemerdekaan Indonesia 77 Tahun

CSS animasi bendera kemerdekaan Indonesia pada artikel ini bisa dipasang didalam blog. Dengan tujuan untuk menyambut hari kemerdekaan Indonesia

Daftar Isi

CSS animasi bendera kemerdekaan Indonesia pada artikel ini bisa dipasang didalam blog. Dengan tujuan untuk menyambut hari kemerdekaan Indonesia yang dirayakan setiap pada tanggal 17 Agustus.

CSS Animasi Bendera Kemerdekaan Indonesia 77 Tahun

Menyambut hari kemerdekan Indonesia yang ke 77 tahun ini, masyarakat mulai menyiapkan diri dengan berbagai acara. Biasanya untuk memeriahkan hari kemerdekaan di bulan Agustus ini selalu disemarakkan dengan berbagai lomba.

Berbagai lomba yang ada diberbagai desa ini menyesuaikan dengan adat dan budaya yang ada, namun yang paling umum diselenggarakan adalah lomba panjat pinang, lomba lari kelereng, lomba makan krupuk, lomba memasukkan paku, lomba lari karung dan pukul kendi.

Untuk beberapa lomba yang juga seru yaitu lomba kebersihan lingkungan antar RT dengan berbagai ornamen kemerdekaan. Jalan-jalan atau gang serta pos ronda dihias sedemikian rupa, mulai dari warna, berbagai miniatur bendera merah putih, serta lampu warna warni menghiasi setiap sudut jalan.

Sungguh sangat meriah dan indah... Namun kondisi itu berubah ketika sudah bulan September. Lingkungan yang bersih dan ditata rapi, perlahan mulai pudah dan memudar seiring pergantian bulan. Pertanyaannya, Apakah hanya dibulan Agustus saja lingkungan setiap RT terlihat sangat rapi dan indah?

Ga perlu dijawab, yang penting 1 bulan penuh di bulan Agustus ini kita semua bergembira ria menyambut hari kemerdekaan Indonesia ini. Seperti halnya blog ini, juga ikut memeriahkan Hari Ulang Tahun Kemerdekaan Republik Indonesia ke 77 tahun (HUT Kemeredekaan RI ke 77 tahun).

Meski tidak bisa dinikmati oleh semua rakyat Indonesia, setidaknya artikel ini merupakan bagian kami turut serta menyambut hari kemerdekaan dengan antusias yaitu dengan membuat css animasi bendera kemerdekaan Indonesia.

Membuat animasi bendera ini dengan menggunakan kode CSS yang bisa dilakukan oleh semua blogger karena bisa mencari panduannya di Google. Namun untuk beberapa animasi bendera yang memiliki beberapa efek menggunakan kombinasi kode CSS, mungkin terlihat lebih sulit.

Penggunaan kode CSS dengan fungsi rotasi (rotate()), gradiasi warna, shadow atau efek bayangan, teks animasi, dan beberapa kode yang digunakan untuk membuat animasi bergerak ini.

Untuk tampilan jadinya, bisa dilihat dibawah ini. Tampilan bendera merah putih ini menggunakan CSS saja dan bukan gambar.

See the Pen Animasi Bendera Merah Putih Dengan CSS danHTML by Sahroni (@digitalpoin) on CodePen.

Bagaimana cara membuatnya? Untuk membuat animasi bendera kemerdekaan Indonesia diatas, silahkan gunakan kode CSS dibawah ini. Cara penggunaannya bisa dibaca pada artikel: Cara Mengganti Kode Template Blog

.flags{background-image:linear-gradient(#ccc,#999);color:#fffc;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:20px;perspective:20em}
.flag{position:relative;width:0;height:16em;background-color:#fff;transform:translateX(-6em) rotateX(-30deg) rotateY(15deg);transform-style:preserve-3d}
.flap{position:absolute;top:0;left:calc(100% - 1px);width:calc(1em + 1px);height:9em;box-shadow:0 0 1em #0003 inset;transform-style:preserve-3d;transform-origin:left;-webkit-animation:flap 3s infinite ease-in-out;animation:flap 3s infinite ease-in-out}
.flap{-webkit-animation-delay:0s;-moz-animation-delay:0s;animation-delay:0s;background-image:linear-gradient(180deg,red,white);--v:0deg}
.flap .content::before{left:0}
.flap .content::after{left:0}
.flap > .flap{-webkit-animation-delay:-0.375s;animation-delay:-0.375s;background-image:linear-gradient(180deg,red,white);--v:2.5deg}
.flap > .flap .content::before{left:-0.25em}
.flap > .flap .content::after{left:-0.5em}
.flap > .flap > .flap{-webkit-animation-delay:-0.75s;animation-delay:-0.75s;background-image:linear-gradient(180deg,red,white);--v:5deg}
.flap > .flap > .flap .content::before{left:-0.5em}
.flap > .flap > .flap .content::after{left:-1em}
.flap > .flap > .flap > .flap{-webkit-animation-delay:-1.125s;animation-delay:-1.125s;background-image:linear-gradient(180deg,red,white);--v:7.5deg}
.flap > .flap > .flap > .flap .content::before{left:-0.75em}
.flap > .flap > .flap > .flap .content::after{left:-1.5em}
.flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-1.5s;animation-delay:-1.5s;background-image:linear-gradient(180deg,red,white);--v:10deg}
.flap > .flap > .flap > .flap > .flap .content::before{left:-1em}
.flap > .flap > .flap > .flap > .flap .content::after{left:-2em}
.flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-1.875s;animation-delay:-1.875s;background-image:linear-gradient(180deg,red,white);--v:12.5deg}
.flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.25em}
.flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-2.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-2.25s;animation-delay:-2.25s;background-image:linear-gradient(180deg,red,white);--v:15deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-3em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-2.625s;animation-delay:-2.625s;background-image:linear-gradient(180deg,red,white);--v:17.5deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.75em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-3.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3s;animation-delay:-3s;background-image:linear-gradient(180deg,red,white);--v:20deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-4em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3.375s;animation-delay:-3.375s;background-image:linear-gradient(180deg,red,white);--v:22.5deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.25em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-4.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3.75s;animation-delay:-3.75s;background-image:linear-gradient(180deg,red,white);--v:25deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.125s;animation-delay:-4.125s;background-image:linear-gradient(180deg,red,white);--v:27.5deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.75em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-5.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.5s;animation-delay:-4.5s;background-image:linear-gradient(180deg,red,white);--v:30deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-6em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.875s;animation-delay:-4.875s;background-image:linear-gradient(180deg,red,white);--v:32.5deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.25em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-6.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-5.25s;animation-delay:-5.25s;background-image:linear-gradient(180deg,red,white);--v:35deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.5em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-7em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-5.625s;animation-delay:-5.625s;background-image:linear-gradient(180deg,red,white);--v:37.5deg}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.75em}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-7.5em}
.flap::after{content:"";position:absolute;top:16em;left:50%;width:200%;height:1em;background-color:#999;transform:translate(-50%,-50%) rotateX(90deg);border-radius:0.5em;filter:blur(0.6em)}
.content{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transform:translateZ(0.5px);text-shadow:0 0 0.5em #000}
.content::before{content:"77 tahun";position:absolute;bottom:40%;left:0;width:4em;text-align:center;font-size:4em}
.content::after{content:"MERDEKA";position:absolute;top:50%;left:0;width:8em;text-align:center;font-size:2em;white-space:pre;line-height:0.8;-webkit-animation:afterText 6.6s infinite step-end;animation:afterText 6.6s infinite step-end}
@-webkit-keyframes afterText{0%{content:"MERDEKA"}50%{content:"DIRGAHAYU \aINDONESIA"}}
@keyframes afterText{0%{content:"MERDEKA"}50%{content:"DIRGAHAYU \aINDONESIA"}}
@-webkit-keyframes flap{0%,100%{transform:rotateY(calc(var(--v) * -1))}50%{transform:rotateY(var(--v))}}
@keyframes flap{0%,100%{transform:rotateY(calc(var(--v) * -1))}50%{transform:rotateY(var(--v))}}
.pole{content:"";position:absolute;top:0;right:0;width:1em;height:100%;border-radius:0 0 0.5em 0.5em/0 0 0.3em 0.3em;background-image:linear-gradient(#7777,#6660,#555),linear-gradient(90deg,#777,#fff,#555)}
.pole::before{content:"";position:absolute;top:100%;left:50%;width:4em;height:4em;transform:translate(-50%,-50%) rotateX(90deg);background-image:radial-gradient(#0004,#0000 60%)}
.pole::after{content:"";position:absolute;top:0%;left:50%;width:1em;height:0.4em;border-radius:50%;transform:translate(-50%,-50%);background-image:radial-gradient(circle at top,#aaa,#333)}

Penggunaan Font

Jika ingin menggunakan font seperti contoh tampilan Demo diatas, gunakan font sesuai yang diinginkan. Jenis font bisa menggunakan font bawaan blog atau menambahkannya kedalam blog.

Baca Juga : Cara Memasang dan Mengganti Font di Blog

Jika tidak ingin menggunakan font yang sudah ada didalam kode CSS, dan langsung menggunakan font bawaan blog, hapus atau tambahkan saja kode fontnya:

.flags{font-family:"Orelega One",cursive;background-image:linear-gradient(#ccc,#999);color:#fffc;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:20px;perspective:20em}

Jika sudah memasang kode CSS bendera animasi, untuk meletakkan dan menampilkan benderanya di blog, gunakan kode HTML dibawah ini. Kode HTML bisa diletakkan dimana saja sesuai keinginan.

<div class="flags">
<div class="flag">
  <div class="flap">
    <div class="flap">
      <div class="flap">
        <div class="flap">
          <div class="flap">
            <div class="flap">
              <div class="flap">
                <div class="flap">
                  <div class="flap">
                    <div class="flap">
                      <div class="flap">
                        <div class="flap">
                          <div class="flap">
                            <div class="flap">
                              <div class="flap">
                                <div class="flap">
                                  <div class="content"></div>
                                </div>
                                <div class="content"></div>
                              </div>
                              <div class="content"></div>
                            </div>
                            <div class="content"></div>
                          </div>
                          <div class="content"></div>
                        </div>
                        <div class="content"></div>
                      </div>
                      <div class="content"></div>
                    </div>
                    <div class="content"></div>
                  </div>
                  <div class="content"></div>
                </div>
                <div class="content"></div>
              </div>
              <div class="content"></div>
            </div>
            <div class="content"></div>
          </div>
          <div class="content"></div>
        </div>
        <div class="content"></div>
      </div>
      <div class="content"></div>
    </div>
    <div class="content"></div>
  </div>
  <div class="pole"></div>
</div>
</div>

Untuk merubah tampilan bendera animasi menjadi lebih kecil, ganti ukuran font di kode CSS berikut:

.flags{font-family:"Orelega One",cursive;background-image:linear-gradient(#ccc,#999);color:#fffc;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:20px;perspective:20em}

Untuk menghilangkan background, ganti kode CSS berikut:

.flags{font-family:"Orelega One",cursive;background-image:linear-gradient(#ccc,#999);color:#fffc;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:20px;perspective:20em}

Silahkan dicoba dipasang animasi bendera kemerdekaan Indonesia dengan menggunakan kode CSS dan HTML ini. Dengan memasang animas bendera kemerdekaan, kita turut serta menyambut HUT RI ke 77 tahun. Semoga jaya selalu Indonesiaku...

Roni
Penulis:
Roni
Janganlah berkomentar tentang hal yang belum kamu ketahui

Baca Juga Artikel Lainya:

Komentar

Syarat Ketentuan

Setiap komentar yang Anda tulis tidak bisa dihapus dan di edit, jadi berkomentarlah secara bijak karena setiap komentar yang Anda tulis menjadi tanggungjawab Anda sendiri.

Portofolio

Kerjasama artikel review dengan lebih dari 100 perusahaan

Alpha Investasi
Astragraphia
Astra UD Trucks
Asus
CIMB Niaga
Citra Harmonika
CV Menarik
Everpro
Forwarder AI
Galeri 24
Galleria
Gateshead Harriers
Halal Practitioner
Halodoc
Happy Dental Clinic
Heo.li
Hotel Mewah
Hotel Pesona
iBooming Global
ICAN English
Inoui Print
Instaprint Siaga
Intiland
Inti Solar
Jabar Ekspres
Jagoan Hosting
Jobs AU
Klik Logistics
Klinik Mata Nusantara
KOL
Koneksi
Kontrak Hukum
Lasmah Kota Harmonika
Mabruk Tour
Magic Hour
Makmur
Mebiso
Monotaro
Motor Kux
Ngalup
OLX
Palace Decor
Peak Wine
Pendaftaran Esa Unggul
Pestigo
Pestigo
PGN LNG
PT NAS
Purityfic
Rental LED Jakarta
Sewa Kantor CBD
Simpatik Indonesia
Sneakershoot
Surya Cipta
Telkomsel
Tendara
Toko Isi Cash
UMG
Villa Kamar
Zona Olahraga
AGM
Alpha Investasi
Astragraphia
Yuk Gabung Sekarang!