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.
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...
