Membuat Animasi Marhaban Ya Ramadhan

Animasi Halo Ramadhan - Halo Ramadhan, bulan suci penuh berkah telah tiba. Sudah waktunya untuk dekat dengannya. Jauhi kejahatan dan perbanyak beribadah. Selamat datang bulan Ramadhan 1442 yang penuh berkah.

Berikut adalah beberapa panduan yang telah saya bagikan untuk mengatakan "Halo Ramadhan" atau "Selamat Ramadhan" yang dapat diposting di Blog Loyalitas, antara lain:

1. Halo Ramadhan dengan animasi CSS
2. Buat ucapan atau ucapan lucu tentang Ramadhan dengan efek paralaks
3. Buat spanduk sembulan dengan batas waktu CSS dan Javascript

halo animasi ramadhan

Dan kali ini saya membuat animasi "Selamat Datang Ramadhan" dengan tombol getar, ha...

Sekarang 1442 H saat kita menyambut bulan suci Ramadhan. atau 2021 Bayram, saya menggunakannya di blog Perusahaan Ajaib ini. Jika masih terpasang, ada berlian di sudut kiri atas posting blog ini.

Jika Anda ingin menyematkannya di blog Anda, salin kode di bawah ini.

Untuk blog non-AMP

Tempelkan kode CSS ke gaya blog Anda.

 /*Ramadhan*/

 .kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{ Baik : 0; Lebar: 80 piksel; Tinggi: 80 piksel; penunjuk: penunjuk}. lebar { lebar: 100%; Tinggi: 100%; tinggalkan 0; warna latar: rgba(9,100,13, .8); Atzeko planoko irudia: URLa (https://1.bp.blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAAAABQMk/CssDna5Zst4FIXesvj9nd1N_xVCusNvwQCLcBGAsYHQ/s40000000000-rwi-lementsdup:00000000000000000000 . max-width: 800px, line-height: 1.4, margins: 0, padding: 0.5 rem, position: relative, text-align: center } .en blockquote: after, .Lebaran blockquote: before { position: absolute; warna: #f1efe6 ; ukuran huruf: 8rem; lebar: 4rem; tinggi: 4rem; opacity: "'; kiri: -3rem; atas: -2rem} Lebar blok-elevasi: {isi: setelah '"'; ke kanan: -3rem ; bawah : 1rem}.} shake {-web kit-transform -origin: tengah atas; - ms-transform-o Opacity: tengah atas; asal transformasi: bagian atas; animasi: shake 1 s linearly infinite} @- webkit-keyframes shake { % 20 { -webkit-transform: rotate3d(0, 0,1,15deg), transformasi rotate3d(0, 0,1,15deg) } % 40 { - webkit-transform: rotate3d (0,0, 1, -10deg) ); transformasi: rotate3d(0,0, 1, -10deg)} 60% {-webkit-transform: rotate3d(0,0,1,5deg); transformasi: rotate3d(0,0,1.5degrees)} 80% {-webkit-transform: rotate3d(0, 0.1, -5degrees); transformasi: rotate3d(0,0,-1,-5degrees)} 100% {-webkit-transform: rotate3d(0,0,1,0degrees); transform: rotate3d(0,0,1,0degrees))}}} @keyframes shake {20%{-webkit-transform: rotate3d(0,0,1,15degrees); transformasi: rotate3d(0,0,1,15degrees)} 40% {-webkit-transform: rotate3d(0), 0,1, -10degrees); transformasi: rotate3d(0,0,1,-10degrees)} 60% {-webkit-transform: rotate3d(0,0,1,5degrees); transformasi: rotate3d(0, 0,1, 5 derajat)} 80% {-webkit-transform: rotate3d(0,0.1, -5 derajat); transformasi: rotate3d(0,0,1,-5degrees)} 100% {-webkit-transform: rotate3d(0,0), 1.0degrees); mengubah: rotate3d(0, 0,1,0deg)}}. tampilkan {-webkit-animation-name. menunjukkan nama gerakan: penampilan; -webkit-animasi-durasi: 1s; durasi animasi n: 1s; -webkit-animation-fill-mode: keduanya; animasi-isi-mode: keduanya } @ - webkit keyframes terlihat { 0% { opacity : 0 ; -webkit-transform: scale3d(.3, .3, .3); transformasi: scale3d(.3, .3, .3)} 50% {opacity: 1}} @keyframe terlihat {0% {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform : scale3d ( .3 , .3 , .3 ) } 50 % { transparent : 1 } } @media screen dan ( max-width : 425px ) { . quote-width {ukuran font: 1rem} Quote-size .width. maka .width adalah kutipan. forward { ukuran font : 6 rem ; lebar: 2 m; tinggi: 2 m}}

Jika Anda ingin tombol berada di sebelah kiri, ubah CSS di atas menjadi left right .

Kemudian paste kode berikut di atas kode Anda juga dapat mengedit/mengganti penawaran.

Halo Ramadhan... Bulan suci penuh berkah. Sudah waktunya untuk dekat dengannya. Jauhi kejahatan dan perbanyak beribadah. Selamat datang bulan Ramadhan 1442 yang penuh berkah.



 Kontrol imajinasi 

Lihat di blog

AMP untuk blogger

Tempelkan kode CSS ke dalam gaya AMP blog Anda.

 /*Ramadhan*/

 .kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{ Baik : 0; penunjuk: penunjuk; Lebar: 80 piksel; Tinggi: 80 piksel. lebar { lebar: 100%; Tinggi: 100%; tinggalkan 0; warna latar: rgba(9,100,13, .8); фоновая картинка: url(https://1.bp.blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAABQMk/CssDna5Zst4FIXesvj9nd1N_xVCusNvwQCLcBGAsYHQ/s400-rw/ketupat.blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAABQMk/CssDna5Zst4FIXesvj9nd1N_xVCusNvwQCLcBGAsYHQ/s400-rw/ketupat .blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAABQMk;display:flex;direction:column:flex;element-align:center;content-align:center} .width-blockquote { font-weight: 700; font-size: 1 ,6 ; font-family: Arial, warna: #fff, width: 60%, max-width: 800px, font-height: 1.4, margin: 0, padding: 0.5rem, position: relative, text-align: center , block-quote : setelah , .Library-block : before { position: Absolute, color: #f1efe6, font-size: 8rm, width: 4rm, height: 4rm, opacity: .5 }.Library-block : before { content: ' "'; kiri : -3m ; atas: -2m}. Lebaran blok kutipan: {setelah konten: '"'; kanan: -3m; bawah: 1mm} Duduk di perpustakaan {line-height: 3; di file gulir teks ke kiri; warna: #fff} .close-Lebaran {posisi: Absolut; atas: 20 piksel; kanan: 20 piksel; kursor: penunjuk}. shake {-web kit-transform-origin: top-center; -ms-transform-o Reg. di bagian atas; Mulai transmisi: bagian atas; animasi: shake 1s linear infinite } @ - webkit-keyframes shake { 20% { - webkit-transform: rotate3d(0,0,1,15deg); transformasi: rotate3d(0, 0,1,15o)} 40% {-webkit-transform: rotate3d(0,0,1, -10o); transformasi: rotate3d(0,0,1,-10degrees)} 60% {-webkit-transform: rotate3d(0,0,1,5degrees); transformasi: rotate3d(0,0,1.5degrees)} 80% {-webkit-transform: rotate3d(0, 0.1, -5degrees); transformasi: rotate3d(0,0,-1,-5degrees)} 100% {-webkit-transform: rotate3d(0,0,1,0degrees); transform: rotate3d(0,0,1,0degrees))}}} @keyframes shake {20%{-webkit-transform: rotate3d(0,0,1,15degrees); transformasi: rotate3d(0,0,1,15degrees)} 40% {-webkit-transform: rotate3d(0), 0,1, -10degrees); transformasi: rotate3d(0,0,1,-10degrees)} 60% {-webkit-transform: rotate3d(0,0,1,5degrees); transformasi: rotate3d(0, 0,1, 5 derajat)} 80% {-webkit-transform: rotate3d(0,0.1, -5 derajat); transformasi: rotate3d(0,0,1,-5degrees)} 100% {-webkit-transform: rotate3d(0,0), 1.0degrees); mengubah: rotate3d(0, 0,1,0deg)}}. tampilkan {-webkit-animation-name. menunjukkan nama gerakan: penampilan; -webkit-animasi-durasi: 1s; durasi animasi n: 1s; -webkit-animation-fill-mode: keduanya; animasi-isi-mode: keduanya } @ - webkit keyframes terlihat { 0% { opacity : 0 ; -webkit-transform: scale3d(.3, .3, .3); transformasi: scale3d(.3, .3, .3)} 50% {opacity: 1}} @keyframe terlihat {0% {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform : scale3d ( .3 , .3 , .3 ) } 50 % { transparent : 1 } } @media screen dan ( max-width : 425px ) { . quote-width {ukuran font: 1rem} Quote-size .width. maka .width adalah kutipan. forward { ukuran font : 6 rem ; lebar: 2 m; tinggi: 2 m}}

Jika Anda ingin tombol berada di sebelah kiri, ubah CSS di atas menjadi left right .

Kemudian paste kode berikut di atas kode Anda juga dapat mengedit/mengganti penawaran.

Ini mungkin berguna.

Gambar tombol berlian dari Giphy.com dan latar belakang berlian dari Cleanpng.com.

Gambar widget ini menggunakan format webp dan menggunakan kode penutup svg, sehingga cukup ringan untuk dimuat di blog.

GIF dari Bilikata.com