Hello sobat ICloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana sih caranya membuat animasi bunga berkelip diblogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Bunga Berkelip
Animasi bunga berkelip merupakan nama dari sebuah animasi bergerak diblogger, yang dibuat antara perpaduan kode CSS dan juga HTML, tampilan dari animation tersebut nantinya akan menampilkan sebuah bunga diiringi kerlipan dari bagian samping yang membuat bung tersebut nampak hidup
Fungsi
Setiap animasi CSS ataupun HTML pastinya memiliki fungsi serta kegunaan, sama halnya dengan animasi bunga kmberkelip ini, kamu bisa membuat loading page menggunakan animasi yang saya berikan ini
Perpaduan Kode
Seperti yang sudah admin sampaikan sebelumnya bahwa didalam pembuatan animasi bunga bergerak berkelip tersebut, dibuat menggunakan perpaduan kode HTML dan kode CSS, yang nanti amdin bakalan menampilkan unsur kode yang digunakan untuk membuat animasi tersebut
Contoh Tampilan
Sebagai pelengkap admin juga bakalan memberikan contoh tampilan dari animation bunga berkelip diblogger tersebut, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya
Info: Nah sobat bagaimana tampilan dari animasi bergerak tersebut, keren ya
Cara Pembuatan
Baiklah saatnya admin akan membahas bagaimana caranya membuat animasi bunga berkelip diblogger, pelajari tulisan ini hingga selesai okay
Kode CSS
Baiklah sobat langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa menempelkan kode CSS tersebut atas kode ]]></b:skin>
@import "bourbon";
svg.rahrah {
max-width: 300px;
}
}
@keyframes shape-animation-rah {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
$classes: 8;
@for $i from 1 through $classes {
.inner-#{$i} {
animation: shape-animation-rah #{$i}s linear alternate infinite;
}
}
@for $i from 1 through $classes {
.outer-#{$i} {
animation: shape-animation-rah #{$i}s linear alternate infinite;
}
}Info: Atau sobat bisa menggunakan tag <style> untuk meletakkan kode tersebut
Kode HTML
Nah selanjutnya kamu biabmenyalin lagi kode HTML dibawah ini kemudian kamu bisa menggunakan sesuai keperluan kamu aja
<svg class='rahrah' viewBox="0 0 100 100">
<g class="outer">
<path class="outer-8" fill="#20409A" d="M49.9,14.7C49.9,14.6,49.9,14.6,49.9,14.7c4.9-4.9,11.3-7.4,17.7-7.4C63,2.8,56.8,0,49.9,0
C43,0,36.7,2.8,32.2,7.4C38.6,7.4,45,9.8,49.9,14.7z"/>
<path class="outer-7" opacity="0.9" fill="#20409A" d="M50.1,85.3C50.1,85.4,50.1,85.4,50.1,85.3c-4.9,4.9-11.3,7.4-17.7,7.4
c4.5,4.5,10.7,7.3,17.6,7.3c6.9,0,13.2-2.8,17.7-7.4C61.4,92.6,55,90.2,50.1,85.3z"/>
<path class="outer-6" fill="#20409A" d="M85.3,49.9C85.4,49.9,85.4,49.9,85.3,49.9c4.9,4.9,7.4,11.3,7.4,17.7
c4.5-4.5,7.3-10.7,7.3-17.6c0-6.9-2.8-13.2-7.4-17.7C92.6,38.6,90.2,45,85.3,49.9z"/>
<path class="outer-5" fill="#20409A" d="M14.7,50.1C14.6,50.1,14.6,50.1,14.7,50.1c-4.9-4.9-7.4-11.3-7.4-17.7C2.8,37,0,43.2,0,50.1
C0,57,2.8,63.3,7.4,67.8C7.4,61.4,9.8,55,14.7,50.1z"/>
<path class="outer-4" fill="#f80000" d="M24.9,25.1C24.9,25.1,24.9,25,24.9,25.1c0-7,2.8-13.2,7.3-17.7c-6.4,0-12.7,2.5-17.6,7.3
C9.7,19.6,7.2,26,7.3,32.5C11.8,27.9,18,25.1,24.9,25.1z"/>
<path class="outer-3" fill="#f80000" d="M25.1,75.1C25.1,75.1,25,75.1,25.1,75.1c-7,0-13.2-2.8-17.7-7.3c0,6.4,2.5,12.7,7.3,17.6
c4.9,4.9,11.3,7.3,17.8,7.3C27.9,88.2,25.1,82,25.1,75.1z"/>
<path class="outer-2" fill="#f80000" d="M75.1,74.9C75.1,74.9,75.1,75,75.1,74.9c0,7-2.8,13.2-7.3,17.7c6.4,0,12.7-2.5,17.6-7.3
c4.9-4.9,7.3-11.3,7.3-17.8C88.2,72.1,82,74.9,75.1,74.9z"/>
<path class="outer-1" fill="#f80000" d="M74.9,24.9C74.9,24.9,75,24.9,74.9,24.9c7,0,13.2,2.8,17.7,7.3c0-6.4-2.5-12.7-7.3-17.6
C80.4,9.7,74,7.2,67.5,7.3C72.1,11.8,74.9,18,74.9,24.9z"/>
</g>
<g class="inner" opacity="0.7">
<path class="inner-8" fill="#20409A" d="M24.9,25.1C24.9,25.1,25,25.1,24.9,25.1c7,0,13.2,2.8,17.7,7.3c0-6.4,2.4-12.8,7.3-17.7
C45,9.8,38.6,7.4,32.2,7.4C27.7,11.9,24.9,18.1,24.9,25.1C24.9,25,24.9,25.1,24.9,25.1z"/>
<path class="inner-7" fill="#20409A" d="M14.7,50.1C14.7,50.1,14.7,50.1,14.7,50.1c4.9-4.9,11.3-7.4,17.7-7.4
c-4.5-4.5-7.4-10.8-7.4-17.7c-6.9,0-13.1,2.8-17.7,7.4C7.3,38.8,9.7,45.2,14.7,50.1C14.6,50.1,14.6,50.1,14.7,50.1z"/>
<path class="inner-6" fill="#20409A" d="M50.1,85.3C50.1,85.3,50.1,85.3,50.1,85.3c-4.9-4.9-7.4-11.3-7.4-17.7
c-4.5,4.5-10.8,7.4-17.7,7.4c0,6.9,2.8,13.1,7.4,17.7C38.8,92.7,45.2,90.3,50.1,85.3C50.1,85.4,50.1,85.4,50.1,85.3z"/>
<path class="inner-5" fill="#20409A" d="M25.1,75.1C25.1,75.1,25.1,75,25.1,75.1c0-7,2.8-13.2,7.3-17.7c-6.4,0-12.8-2.4-17.7-7.3
C9.8,55,7.4,61.4,7.4,67.8C11.9,72.3,18.1,75.1,25.1,75.1C25,75.1,25.1,75.1,25.1,75.1z"/>
<path class="inner-4" fill="#20409A" d="M75.1,74.9C75.1,74.9,75,74.9,75.1,74.9c-7,0-13.2-2.8-17.7-7.3c0,6.4-2.4,12.8-7.3,17.7
c4.9,4.9,11.3,7.3,17.7,7.3C72.3,88.1,75.1,81.9,75.1,74.9C75.1,75,75.1,74.9,75.1,74.9z"/>
<path class="inner-3" fill="#20409A" d="M85.3,49.9C85.3,49.9,85.3,49.9,85.3,49.9c-4.9,4.9-11.3,7.4-17.7,7.4
c4.5,4.5,7.4,10.8,7.4,17.7c6.9,0,13.1-2.8,17.7-7.4C92.7,61.2,90.3,54.8,85.3,49.9C85.4,49.9,85.4,49.9,85.3,49.9z"/>
<path class="inner-2" fill="#20409A" d="M49.9,14.7C49.9,14.7,49.9,14.7,49.9,14.7c4.9,4.9,7.4,11.3,7.4,17.7
c4.5-4.5,10.8-7.4,17.7-7.4c0-6.9-2.8-13.1-7.4-17.7C61.2,7.3,54.8,9.7,49.9,14.7C49.9,14.6,49.9,14.6,49.9,14.7z"/>
<path class="inner-1" fill="#20409A" d="M74.9,24.9C74.9,24.9,74.9,25,74.9,24.9c0,7-2.8,13.2-7.3,17.7c6.4,0,12.8,2.4,17.7,7.3
c4.9-4.9,7.3-11.3,7.3-17.7C88.1,27.7,81.9,24.9,74.9,24.9C75,24.9,74.9,24.9,74.9,24.9z"/>
</g>
</svg>Info: Sebagi informasi nih sobat, bahwa fungsi dari kode html diatas adalah untuk menampilkan Animasi bunga berkelip tersebut