Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat efek animasi kembang api atau fireworks dalam bahasa inggrisnya di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Animasi Fireworks
Aninasi Fireworks merupkan suatu tampilan animasi bergerak dalam bentuk kembang api atau bisa di sebut sebagai fireworks animation, jika kamu pernah melihat kembang api yang seperti itulah tanpilan animasi fireworks nantinya
Tampilan Responsif
Karena tampilan Fireworks telah di atur pengaturan fixed maka tampilan Fireworks nantinya akan tampil pada halaman body blog, sehingga tampilan animasi Fireworks akan mudah dilihat olleh aiapun pengunjung blog, dan sudah oasti tampilannya responsif
Menggunakan CSS
Dalam membuat tampilan animasi fireworks di blogger menggunakan kode CSS yang todak di enkripsi, sehingga kamu bisa megedit dan mengubah tampilan dengan mudah, semisal mengubah warna dan sebagainya
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan animasi Fireworks di blogger, silahkan lihat dan periksa menggunakan tombol di bawah ini ok
Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskab mengenai cara membuat tampilan animasi Firework di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini ok
Kode CSS
Langkah pertama seperti biasa yang bisa kamu lakukan adalah menyalin kode css di bawah ini kemudian letakkan di atas kode ]]></b:skin>
.rahfireworks{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.rahfire {
background: currentColor;
border-radius: 50%;
position: absolute;
width: 4px;
height: 4px;
will-change: transform, box-shadow;
mix-blend-mode: color-dodge;
}
.rahfire:nth-child(1) {
-webkit-animation: rahfireAnim 7s infinite 2s;
animation: rahfireAnim 7s infinite 2s;
color: #ff8800;
top: 10vh;
left: 61vw;
transform: translate3d(-18px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(2) {
-webkit-animation: rahfireAnim 7s infinite 7s;
animation: rahfireAnim 7s infinite 7s;
color: #ffb300;
top: 10vh;
left: 28vw;
transform: translate3d(40px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(3) {
-webkit-animation: rahfireAnim 7s infinite 7s;
animation: rahfireAnim 7s infinite 7s;
color: #1aff00;
top: 10vh;
left: 86vw;
transform: translate3d(-18px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(4) {
-webkit-animation: rahfireAnim 7s infinite 3s;
animation: rahfireAnim 7s infinite 3s;
color: #ff6f00;
top: 6vh;
left: 10vw;
transform: translate3d(31px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(5) {
-webkit-animation: rahfireAnim 7s infinite 2s;
animation: rahfireAnim 7s infinite 2s;
color: #00ff40;
top: 15vh;
left: 37vw;
transform: translate3d(-21px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(6) {
-webkit-animation: rahfireAnim 7s infinite 0s;
animation: rahfireAnim 7s infinite 0s;
color: #ff0400;
top: 12vh;
left: 88vw;
transform: translate3d(44px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(7) {
-webkit-animation: rahfireAnim 7s infinite 8s;
animation: rahfireAnim 7s infinite 8s;
color: #a6ff00;
top: 10vh;
left: 97vw;
transform: translate3d(-31px, 100vh, 0) scale(1.2);
}
.rahfire:nth-child(8) {
-webkit-animation: rahfireAnim 7s infinite 1s;
animation: rahfireAnim 7s infinite 1s;
color: #22ff00;
top: 14vh;
left: 29vw;
transform: translate3d(-34px, 100vh, 0) scale(1.2);
}
@-webkit-keyframes rahfireAnim {
0%, 20% {
box-shadow: none;
}
30% {
transform: none;
}
45% {
box-shadow: 0.54695px 3.96243px 1px currentColor, -7.70085px 2.16725px 1px currentColor, -4.79982px -10.99826px 1px currentColor, 13.65152px -8.34482px 1px currentColor, 12.66638px 15.47781px 1px currentColor, -16.32056px 17.59657px 1px currentColor, -22.94007px -16.05469px 1px currentColor, 14.59101px -28.47986px 1px currentColor, 33.98343px 11.87967px 1px currentColor, -7.91254px 39.20959px 1px currentColor, -43.91557px -2.72449px 1px currentColor, -3.60653px -47.86432px 1px currentColor, 50.83173px -10.96062px 1px currentColor, 19.17812px 52.61368px 1px currentColor, -53.03265px 28.06311px 1px currentColor, -37.3878px -51.94374px 1px currentColor, 49.24002px -46.89798px 1px currentColor, 56.31927px 44.85688px 1px currentColor, -38.77543px 65.36411px 1px currentColor, -73.73917px -31.02475px 1px currentColor, 21.68298px -81.15324px 1px currentColor, 87.32519px 10.87707px 1px currentColor, 1.21869px 91.99193px 1px currentColor, -94.91608px 14.38535px 1px currentColor, -28.36333px -95.89328px 1px currentColor, 94.75884px -42.85747px 1px currentColor, 57.54321px 91.39354px 1px currentColor, -85.72855px 72.07369px 1px currentColor, -86.08754px -77.74918px 1px currentColor, 67.49745px -99.21741px 1px currentColor, 111.09874px 55.07332px 1px currentColor, -40.63453px 121.37889px 1px currentColor, -129.72617px -24.3951px 1px currentColor, 6.62235px -135.83867px 1px currentColor, 139.45267px -12.36741px 1px currentColor, 32.21447px 140.35038px 1px currentColor, -138.36684px 52.52254px 1px currentColor, -72.86665px -133.39584px 1px currentColor, 125.39457px -92.80195px 1px currentColor, 111.87323px 114.38697px 1px currentColor, -100.46573px 129.62499px 1px currentColor, -145.61182px -83.79259px 1px currentColor, 64.59726px -159.40889px 1px currentColor, 170.62225px 43.17464px 1px currentColor, -19.88049px 178.89876px 1px currentColor, -183.93543px 4.87432px 1px currentColor, -30.63108px -185.48783px 1px currentColor, 183.37757px -56.89171px 1px currentColor, 83.12838px 177.49837px 1px currentColor, -167.82087px 108.7941px 1px currentColor, -133.33399px -154.39575px 1px currentColor, 137.35529px -156.19707px 1px currentColor, 176.8483px 116.91312px 1px currentColor, -93.36218px 194.78065px 1px currentColor, -209.52681px -67.07097px 1px currentColor, 38.47799px -220.67044px 1px currentColor, 227.85662px 8.08455px 1px currentColor, 23.55397px 230.80124px 1px currentColor, -229.29912px 55.83826px 1px currentColor, -88.13646px -223.23074px 1px currentColor, 212.56719px -119.79645px 1px currentColor, 150.15901px 197.37343px 1px currentColor, -177.80962px 178.57138px 1px currentColor, -204.40109px -154.13045px 1px currentColor, 126.68248px -227.04966px 1px currentColor, 245.96603px 95.89948px 1px currentColor, -62.29581px 260.65923px 1px currentColor, -270.71013px -26.45796px 1px currentColor, -10.96562px -275.78208px 1px currentColor, 275.62992px -49.27625px 1px currentColor, 87.73803px 270.10746px 1px currentColor, -259.173px 125.59201px 1px currentColor, -162.07112px -242.89288px 1px currentColor, 221.44279px -196.4156px 1px currentColor, 227.88873px 195.10696px 1px currentColor, -164.27503px 255.79232px 1px currentColor, -279.4819px -129.43672px 1px currentColor, 91.17429px -298.38105px 1px currentColor, 311.99468px 50.15298px 1px currentColor, -7.10949px 319.92101px 1px currentColor;
}
65%, 100% {
box-shadow: 0.49225px 3.56619px 3px 1px transparent, -6.93076px 1.95052px 3px 1px transparent, -4.31984px -9.89843px 3px 1px transparent, 12.28637px -7.51033px 3px 1px transparent, 11.39975px 13.93003px 3px 1px transparent, -14.68851px 15.83691px 3px 1px transparent, -20.64606px -14.44922px 3px 1px transparent, 13.13191px -25.63187px 3px 1px transparent, 30.58509px 10.6917px 3px 1px transparent, -7.12129px 35.28863px 3px 1px transparent, -39.52401px -2.45205px 3px 1px transparent, -3.24588px -43.07789px 3px 1px transparent, 45.74856px -9.86455px 3px 1px transparent, 17.26031px 47.35231px 3px 1px transparent, -47.72938px 25.2568px 3px 1px transparent, -33.64902px -46.74937px 3px 1px transparent, 44.31602px -42.20818px 3px 1px transparent, 50.68734px 40.37119px 3px 1px transparent, -34.89788px 58.8277px 3px 1px transparent, -66.36525px -27.92228px 3px 1px transparent, 19.51469px -73.03792px 3px 1px transparent, 78.59267px 9.78936px 3px 1px transparent, 1.09682px 82.79274px 3px 1px transparent, -85.42447px 12.94682px 3px 1px transparent, -25.527px -86.30395px 3px 1px transparent, 85.28296px -38.57172px 3px 1px transparent, 51.78889px 82.25418px 3px 1px transparent, -77.15569px 64.86632px 3px 1px transparent, -77.47879px -69.97426px 3px 1px transparent, 60.74771px -89.29567px 3px 1px transparent, 99.98886px 49.56599px 3px 1px transparent, -36.57108px 109.241px 3px 1px transparent, -116.75355px -21.95559px 3px 1px transparent, 5.96011px -122.2548px 3px 1px transparent, 125.5074px -11.13067px 3px 1px transparent, 28.99302px 126.31534px 3px 1px transparent, -124.53016px 47.27028px 3px 1px transparent, -65.57999px -120.05626px 3px 1px transparent, 112.85511px -83.52176px 3px 1px transparent, 100.68591px 102.94828px 3px 1px transparent, -90.41915px 116.66249px 3px 1px transparent, -131.05064px -75.41333px 3px 1px transparent, 58.13754px -143.468px 3px 1px transparent, 153.56002px 38.85717px 3px 1px transparent, -17.89244px 161.00888px 3px 1px transparent, -165.54188px 4.38689px 3px 1px transparent, -27.56798px -166.93905px 3px 1px transparent, 165.03981px -51.20254px 3px 1px transparent, 74.81555px 159.74853px 3px 1px transparent, -151.03878px 97.91469px 3px 1px transparent, -120.00059px -138.95617px 3px 1px transparent, 123.61976px -140.57736px 3px 1px transparent, 159.16347px 105.22181px 3px 1px transparent, -84.02596px 175.30259px 3px 1px transparent, -188.57413px -60.36387px 3px 1px transparent, 34.63019px -198.6034px 3px 1px transparent, 205.07096px 7.2761px 3px 1px transparent, 21.19857px 207.72111px 3px 1px transparent, -206.36921px 50.25444px 3px 1px transparent, -79.32282px -200.90767px 3px 1px transparent, 191.31047px -107.81681px 3px 1px transparent, 135.14311px 177.63609px 3px 1px transparent, -160.02866px 160.71425px 3px 1px transparent, -183.96098px -138.71741px 3px 1px transparent, 114.01424px -204.34469px 3px 1px transparent, 221.36943px 86.30954px 3px 1px transparent, -56.06623px 234.5933px 3px 1px transparent, -243.63912px -23.81216px 3px 1px transparent, -9.86906px -248.20387px 3px 1px transparent, 248.06693px -44.34862px 3px 1px transparent, 78.96423px 243.09671px 3px 1px transparent, -233.2557px 113.03281px 3px 1px transparent, -145.86401px -218.60359px 3px 1px transparent, 199.29851px -176.77404px 3px 1px transparent, 205.09986px 175.59627px 3px 1px transparent, -147.84753px 230.21309px 3px 1px transparent, -251.53371px -116.49305px 3px 1px transparent, 82.05686px -268.54294px 3px 1px transparent, 280.79521px 45.13768px 3px 1px transparent, -6.39854px 287.92891px 3px 1px transparent;
}
}
@keyframes rahfireAnim {
0%, 20% {
box-shadow: none;
}
30% {
transform: none;
}
45% {
box-shadow: 0.54695px 3.96243px 1px currentColor, -7.70085px 2.16725px 1px currentColor, -4.79982px -10.99826px 1px currentColor, 13.65152px -8.34482px 1px currentColor, 12.66638px 15.47781px 1px currentColor, -16.32056px 17.59657px 1px currentColor, -22.94007px -16.05469px 1px currentColor, 14.59101px -28.47986px 1px currentColor, 33.98343px 11.87967px 1px currentColor, -7.91254px 39.20959px 1px currentColor, -43.91557px -2.72449px 1px currentColor, -3.60653px -47.86432px 1px currentColor, 50.83173px -10.96062px 1px currentColor, 19.17812px 52.61368px 1px currentColor, -53.03265px 28.06311px 1px currentColor, -37.3878px -51.94374px 1px currentColor, 49.24002px -46.89798px 1px currentColor, 56.31927px 44.85688px 1px currentColor, -38.77543px 65.36411px 1px currentColor, -73.73917px -31.02475px 1px currentColor, 21.68298px -81.15324px 1px currentColor, 87.32519px 10.87707px 1px currentColor, 1.21869px 91.99193px 1px currentColor, -94.91608px 14.38535px 1px currentColor, -28.36333px -95.89328px 1px currentColor, 94.75884px -42.85747px 1px currentColor, 57.54321px 91.39354px 1px currentColor, -85.72855px 72.07369px 1px currentColor, -86.08754px -77.74918px 1px currentColor, 67.49745px -99.21741px 1px currentColor, 111.09874px 55.07332px 1px currentColor, -40.63453px 121.37889px 1px currentColor, -129.72617px -24.3951px 1px currentColor, 6.62235px -135.83867px 1px currentColor, 139.45267px -12.36741px 1px currentColor, 32.21447px 140.35038px 1px currentColor, -138.36684px 52.52254px 1px currentColor, -72.86665px -133.39584px 1px currentColor, 125.39457px -92.80195px 1px currentColor, 111.87323px 114.38697px 1px currentColor, -100.46573px 129.62499px 1px currentColor, -145.61182px -83.79259px 1px currentColor, 64.59726px -159.40889px 1px currentColor, 170.62225px 43.17464px 1px currentColor, -19.88049px 178.89876px 1px currentColor, -183.93543px 4.87432px 1px currentColor, -30.63108px -185.48783px 1px currentColor, 183.37757px -56.89171px 1px currentColor, 83.12838px 177.49837px 1px currentColor, -167.82087px 108.7941px 1px currentColor, -133.33399px -154.39575px 1px currentColor, 137.35529px -156.19707px 1px currentColor, 176.8483px 116.91312px 1px currentColor, -93.36218px 194.78065px 1px currentColor, -209.52681px -67.07097px 1px currentColor, 38.47799px -220.67044px 1px currentColor, 227.85662px 8.08455px 1px currentColor, 23.55397px 230.80124px 1px currentColor, -229.29912px 55.83826px 1px currentColor, -88.13646px -223.23074px 1px currentColor, 212.56719px -119.79645px 1px currentColor, 150.15901px 197.37343px 1px currentColor, -177.80962px 178.57138px 1px currentColor, -204.40109px -154.13045px 1px currentColor, 126.68248px -227.04966px 1px currentColor, 245.96603px 95.89948px 1px currentColor, -62.29581px 260.65923px 1px currentColor, -270.71013px -26.45796px 1px currentColor, -10.96562px -275.78208px 1px currentColor, 275.62992px -49.27625px 1px currentColor, 87.73803px 270.10746px 1px currentColor, -259.173px 125.59201px 1px currentColor, -162.07112px -242.89288px 1px currentColor, 221.44279px -196.4156px 1px currentColor, 227.88873px 195.10696px 1px currentColor, -164.27503px 255.79232px 1px currentColor, -279.4819px -129.43672px 1px currentColor, 91.17429px -298.38105px 1px currentColor, 311.99468px 50.15298px 1px currentColor, -7.10949px 319.92101px 1px currentColor;
}
65%, 100% {
box-shadow: 0.49225px 3.56619px 3px 1px transparent, -6.93076px 1.95052px 3px 1px transparent, -4.31984px -9.89843px 3px 1px transparent, 12.28637px -7.51033px 3px 1px transparent, 11.39975px 13.93003px 3px 1px transparent, -14.68851px 15.83691px 3px 1px transparent, -20.64606px -14.44922px 3px 1px transparent, 13.13191px -25.63187px 3px 1px transparent, 30.58509px 10.6917px 3px 1px transparent, -7.12129px 35.28863px 3px 1px transparent, -39.52401px -2.45205px 3px 1px transparent, -3.24588px -43.07789px 3px 1px transparent, 45.74856px -9.86455px 3px 1px transparent, 17.26031px 47.35231px 3px 1px transparent, -47.72938px 25.2568px 3px 1px transparent, -33.64902px -46.74937px 3px 1px transparent, 44.31602px -42.20818px 3px 1px transparent, 50.68734px 40.37119px 3px 1px transparent, -34.89788px 58.8277px 3px 1px transparent, -66.36525px -27.92228px 3px 1px transparent, 19.51469px -73.03792px 3px 1px transparent, 78.59267px 9.78936px 3px 1px transparent, 1.09682px 82.79274px 3px 1px transparent, -85.42447px 12.94682px 3px 1px transparent, -25.527px -86.30395px 3px 1px transparent, 85.28296px -38.57172px 3px 1px transparent, 51.78889px 82.25418px 3px 1px transparent, -77.15569px 64.86632px 3px 1px transparent, -77.47879px -69.97426px 3px 1px transparent, 60.74771px -89.29567px 3px 1px transparent, 99.98886px 49.56599px 3px 1px transparent, -36.57108px 109.241px 3px 1px transparent, -116.75355px -21.95559px 3px 1px transparent, 5.96011px -122.2548px 3px 1px transparent, 125.5074px -11.13067px 3px 1px transparent, 28.99302px 126.31534px 3px 1px transparent, -124.53016px 47.27028px 3px 1px transparent, -65.57999px -120.05626px 3px 1px transparent, 112.85511px -83.52176px 3px 1px transparent, 100.68591px 102.94828px 3px 1px transparent, -90.41915px 116.66249px 3px 1px transparent, -131.05064px -75.41333px 3px 1px transparent, 58.13754px -143.468px 3px 1px transparent, 153.56002px 38.85717px 3px 1px transparent, -17.89244px 161.00888px 3px 1px transparent, -165.54188px 4.38689px 3px 1px transparent, -27.56798px -166.93905px 3px 1px transparent, 165.03981px -51.20254px 3px 1px transparent, 74.81555px 159.74853px 3px 1px transparent, -151.03878px 97.91469px 3px 1px transparent, -120.00059px -138.95617px 3px 1px transparent, 123.61976px -140.57736px 3px 1px transparent, 159.16347px 105.22181px 3px 1px transparent, -84.02596px 175.30259px 3px 1px transparent, -188.57413px -60.36387px 3px 1px transparent, 34.63019px -198.6034px 3px 1px transparent, 205.07096px 7.2761px 3px 1px transparent, 21.19857px 207.72111px 3px 1px transparent, -206.36921px 50.25444px 3px 1px transparent, -79.32282px -200.90767px 3px 1px transparent, 191.31047px -107.81681px 3px 1px transparent, 135.14311px 177.63609px 3px 1px transparent, -160.02866px 160.71425px 3px 1px transparent, -183.96098px -138.71741px 3px 1px transparent, 114.01424px -204.34469px 3px 1px transparent, 221.36943px 86.30954px 3px 1px transparent, -56.06623px 234.5933px 3px 1px transparent, -243.63912px -23.81216px 3px 1px transparent, -9.86906px -248.20387px 3px 1px transparent, 248.06693px -44.34862px 3px 1px transparent, 78.96423px 243.09671px 3px 1px transparent, -233.2557px 113.03281px 3px 1px transparent, -145.86401px -218.60359px 3px 1px transparent, 199.29851px -176.77404px 3px 1px transparent, 205.09986px 175.59627px 3px 1px transparent, -147.84753px 230.21309px 3px 1px transparent, -251.53371px -116.49305px 3px 1px transparent, 82.05686px -268.54294px 3px 1px transparent, 280.79521px 45.13768px 3px 1px transparent, -6.39854px 287.92891px 3px 1px transparent;
}
}Info: Atau sobat bisa menggunakan tag kode style untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini, kemudian letakkan di bawah kode <body>
<div class='rahfireworks'>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
<div class='rahfire'></div>
</div>Info: Kode HTML di atas berfungsi untuk menampilkan efek animasi foreworks nya
Penjelasan
Animasi Fireworks tersebut bisa kamu gunakan saat momen tahun baru, atau untuk seru aeruan aja bisa juga sih menggunakan animasi firework tersebut di dalam web mu, nah jika tutorial di atas tidak berhasil kamu lakukan silahkan hubungi admin, semoga bermanfaat