Blog OG

Cari Blog Ini

'Pelangi'

Dapatkan pautan
Facebook
X
Pinterest
E-mel
Apl Lain

Demo

<div class="labi">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
<style>
.labi {
width: 100%;
height: 500px;
filter: contrast(400%);
background: #000;
}
.labi span {
width: 3vmin;
height: 3vmin;
border-radius: 3vmin;
position: absolute;
animation-name: gerak;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
top: 50%;
left: 51%;
filter: blur(3px);
mix-blend-mode: screen;
}
.labi span:nth-child(1) {
animation-delay: 0.02s;
transform-origin: -18vmin 0px;
background: #d93126;
}
.labi span:nth-child(2) {
animation-delay: 0.04s;
transform-origin: 18vmin 0px;
background: #d93c26;
}
.labi span:nth-child(3) {
animation-delay: 0.06s;
transform-origin: -18vmin 0px;
background: #d94626;
}
.labi span:nth-child(4) {
animation-delay: 0.08s;
transform-origin: 18vmin 0px;
background: #d95126;
}
.labi span:nth-child(5) {
animation-delay: 0.1s;
transform-origin: -18vmin 0px;
background: #d95c26;
}
.labi span:nth-child(6) {
animation-delay: 0.12s;
transform-origin: 18vmin 0px;
background: #d96726;
}
.labi span:nth-child(7) {
animation-delay: 0.14s;
transform-origin: -18vmin 0px;
background: #d97126;
}
.labi span:nth-child(8) {
animation-delay: 0.16s;
transform-origin: 18vmin 0px;
background: #d97c26;
}
.labi span:nth-child(9) {
animation-delay: 0.18s;
transform-origin: -18vmin 0px;
background: #d98726;
}
.labi span:nth-child(10) {
animation-delay: 0.2s;
transform-origin: 18vmin 0px;
background: #d99126;
}
.labi span:nth-child(11) {
animation-delay: 0.22s;
transform-origin: -18vmin 0px;
background: #d99c26;
}
.labi span:nth-child(12) {
animation-delay: 0.24s;
transform-origin: 18vmin 0px;
background: #d9a726;
}
.labi span:nth-child(13) {
animation-delay: 0.26s;
transform-origin: -18vmin 0px;
background: #d9b126;
}
.labi span:nth-child(14) {
animation-delay: 0.28s;
transform-origin: 18vmin 0px;
background: #d9bc26;
}
.labi span:nth-child(15) {
animation-delay: 0.3s;
transform-origin: -18vmin 0px;
background: #d9c726;
}
.labi span:nth-child(16) {
animation-delay: 0.32s;
transform-origin: 18vmin 0px;
background: #d9d226;
}
.labi span:nth-child(17) {
animation-delay: 0.34s;
transform-origin: -18vmin 0px;
background: #d5d926;
}
.labi span:nth-child(18) {
animation-delay: 0.36s;
transform-origin: 18vmin 0px;
background: #cad926;
}
.labi span:nth-child(19) {
animation-delay: 0.38s;
transform-origin: -18vmin 0px;
background: #c0d926;
}
.labi span:nth-child(20) {
animation-delay: 0.4s;
transform-origin: 18vmin 0px;
background: #b5d926;
}
.labi span:nth-child(21) {
animation-delay: 0.42s;
transform-origin: -18vmin 0px;
background: #aad926;
}
.labi span:nth-child(22) {
animation-delay: 0.44s;
transform-origin: 18vmin 0px;
background: #a0d926;
}
.labi span:nth-child(23) {
animation-delay: 0.46s;
transform-origin: -18vmin 0px;
background: #95d926;
}
.labi span:nth-child(24) {
animation-delay: 0.48s;
transform-origin: 18vmin 0px;
background: #8ad926;
}
.labi span:nth-child(25) {
animation-delay: 0.5s;
transform-origin: -18vmin 0px;
background: #80d926;
}
.labi span:nth-child(26) {
animation-delay: 0.52s;
transform-origin: 18vmin 0px;
background: #75d926;
}
.labi span:nth-child(27) {
animation-delay: 0.54s;
transform-origin: -18vmin 0px;
background: #6ad926;
}
.labi span:nth-child(28) {
animation-delay: 0.56s;
transform-origin: 18vmin 0px;
background: #5fd926;
}
.labi span:nth-child(29) {
animation-delay: 0.58s;
transform-origin: -18vmin 0px;
background: #55d926;
}
.labi span:nth-child(30) {
animation-delay: 0.6s;
transform-origin: 18vmin 0px;
background: #4ad926;
}
.labi span:nth-child(31) {
animation-delay: 0.62s;
transform-origin: -18vmin 0px;
background: #3fd926;
}
.labi span:nth-child(32) {
animation-delay: 0.64s;
transform-origin: 18vmin 0px;
background: #35d926;
}
.labi span:nth-child(33) {
animation-delay: 0.66s;
transform-origin: -18vmin 0px;
background: #2ad926;
}
.labi span:nth-child(34) {
animation-delay: 0.68s;
transform-origin: 18vmin 0px;
background: #26d92d;
}
.labi span:nth-child(35) {
animation-delay: 0.7s;
transform-origin: -18vmin 0px;
background: #26d938;
}
.labi span:nth-child(36) {
animation-delay: 0.72s;
transform-origin: 18vmin 0px;
background: #26d943;
}
.labi span:nth-child(37) {
animation-delay: 0.74s;
transform-origin: -18vmin 0px;
background: #26d94e;
}
.labi span:nth-child(38) {
animation-delay: 0.76s;
transform-origin: 18vmin 0px;
background: #26d958;
}
.labi span:nth-child(39) {
animation-delay: 0.78s;
transform-origin: -18vmin 0px;
background: #26d963;
}
.labi span:nth-child(40) {
animation-delay: 0.8s;
transform-origin: 18vmin 0px;
background: #26d96e;
}
.labi span:nth-child(41) {
animation-delay: 0.82s;
transform-origin: -18vmin 0px;
background: #26d978;
}
.labi span:nth-child(42) {
animation-delay: 0.84s;
transform-origin: 18vmin 0px;
background: #26d983;
}
.labi span:nth-child(43) {
animation-delay: 0.86s;
transform-origin: -18vmin 0px;
background: #26d98e;
}
.labi span:nth-child(44) {
animation-delay: 0.88s;
transform-origin: 18vmin 0px;
background: #26d998;
}
.labi span:nth-child(45) {
animation-delay: 0.9s;
transform-origin: -18vmin 0px;
background: #26d9a3;
}
.labi span:nth-child(46) {
animation-delay: 0.92s;
transform-origin: 18vmin 0px;
background: #26d9ae;
}
.labi span:nth-child(47) {
animation-delay: 0.94s;
transform-origin: -18vmin 0px;
background: #26d9b9;
}
.labi span:nth-child(48) {
animation-delay: 0.96s;
transform-origin: 18vmin 0px;
background: #26d9c3;
}
.labi span:nth-child(49) {
animation-delay: 0.98s;
transform-origin: -18vmin 0px;
background: #26d9ce;
}
.labi span:nth-child(50) {
animation-delay: 1s;
transform-origin: 18vmin 0px;
background: #26d9d9;
}
.labi span:nth-child(51) {
animation-delay: 1.02s;
transform-origin: -18vmin 0px;
background: #26ced9;
}
.labi span:nth-child(52) {
animation-delay: 1.04s;
transform-origin: 18vmin 0px;
background: #26c3d9;
}
.labi span:nth-child(53) {
animation-delay: 1.06s;
transform-origin: -18vmin 0px;
background: #26b9d9;
}
.labi span:nth-child(54) {
animation-delay: 1.08s;
transform-origin: 18vmin 0px;
background: #26aed9;
}
.labi span:nth-child(55) {
animation-delay: 1.1s;
transform-origin: -18vmin 0px;
background: #26a3d9;
}
.labi span:nth-child(56) {
animation-delay: 1.12s;
transform-origin: 18vmin 0px;
background: #2698d9;
}
.labi span:nth-child(57) {
animation-delay: 1.14s;
transform-origin: -18vmin 0px;
background: #268ed9;
}
.labi span:nth-child(58) {
animation-delay: 1.16s;
transform-origin: 18vmin 0px;
background: #2683d9;
}
.labi span:nth-child(59) {
animation-delay: 1.18s;
transform-origin: -18vmin 0px;
background: #2678d9;
}
.labi span:nth-child(60) {
animation-delay: 1.2s;
transform-origin: 18vmin 0px;
background: #266ed9;
}
.labi span:nth-child(61) {
animation-delay: 1.22s;
transform-origin: -18vmin 0px;
background: #2663d9;
}
.labi span:nth-child(62) {
animation-delay: 1.24s;
transform-origin: 18vmin 0px;
background: #2658d9;
}
.labi span:nth-child(63) {
animation-delay: 1.26s;
transform-origin: -18vmin 0px;
background: #264ed9;
}
.labi span:nth-child(64) {
animation-delay: 1.28s;
transform-origin: 18vmin 0px;
background: #2643d9;
}
.labi span:nth-child(65) {
animation-delay: 1.3s;
transform-origin: -18vmin 0px;
background: #2638d9;
}
.labi span:nth-child(66) {
animation-delay: 1.32s;
transform-origin: 18vmin 0px;
background: #262dd9;
}
.labi span:nth-child(67) {
animation-delay: 1.34s;
transform-origin: -18vmin 0px;
background: #2a26d9;
}
.labi span:nth-child(68) {
animation-delay: 1.36s;
transform-origin: 18vmin 0px;
background: #3526d9;
}
.labi span:nth-child(69) {
animation-delay: 1.38s;
transform-origin: -18vmin 0px;
background: #3f26d9;
}
.labi span:nth-child(70) {
animation-delay: 1.4s;
transform-origin: 18vmin 0px;
background: #4a26d9;
}
.labi span:nth-child(71) {
animation-delay: 1.42s;
transform-origin: -18vmin 0px;
background: #5526d9;
}
.labi span:nth-child(72) {
animation-delay: 1.44s;
transform-origin: 18vmin 0px;
background: #5f26d9;
}
.labi span:nth-child(73) {
animation-delay: 1.46s;
transform-origin: -18vmin 0px;
background: #6a26d9;
}
.labi span:nth-child(74) {
animation-delay: 1.48s;
transform-origin: 18vmin 0px;
background: #7526d9;
}
.labi span:nth-child(75) {
animation-delay: 1.5s;
transform-origin: -18vmin 0px;
background: #8026d9;
}
.labi span:nth-child(76) {
animation-delay: 1.52s;
transform-origin: 18vmin 0px;
background: #8a26d9;
}
.labi span:nth-child(77) {
animation-delay: 1.54s;
transform-origin: -18vmin 0px;
background: #9526d9;
}
.labi span:nth-child(78) {
animation-delay: 1.56s;
transform-origin: 18vmin 0px;
background: #a026d9;
}
.labi span:nth-child(79) {
animation-delay: 1.58s;
transform-origin: -18vmin 0px;
background: #aa26d9;
}
.labi span:nth-child(80) {
animation-delay: 1.6s;
transform-origin: 18vmin 0px;
background: #b526d9;
}
.labi span:nth-child(81) {
animation-delay: 1.62s;
transform-origin: -18vmin 0px;
background: #c026d9;
}
.labi span:nth-child(82) {
animation-delay: 1.64s;
transform-origin: 18vmin 0px;
background: #ca26d9;
}
.labi span:nth-child(83) {
animation-delay: 1.66s;
transform-origin: -18vmin 0px;
background: #d526d9;
}
.labi span:nth-child(84) {
animation-delay: 1.68s;
transform-origin: 18vmin 0px;
background: #d926d2;
}
.labi span:nth-child(85) {
animation-delay: 1.7s;
transform-origin: -18vmin 0px;
background: #d926c7;
}
.labi span:nth-child(86) {
animation-delay: 1.72s;
transform-origin: 18vmin 0px;
background: #d926bc;
}
.labi span:nth-child(87) {
animation-delay: 1.74s;
transform-origin: -18vmin 0px;
background: #d926b1;
}
.labi span:nth-child(88) {
animation-delay: 1.76s;
transform-origin: 18vmin 0px;
background: #d926a7;
}
.labi span:nth-child(89) {
animation-delay: 1.78s;
transform-origin: -18vmin 0px;
background: #d9269c;
}
.labi span:nth-child(90) {
animation-delay: 1.8s;
transform-origin: 18vmin 0px;
background: #d92691;
}
.labi span:nth-child(91) {
animation-delay: 1.82s;
transform-origin: -18vmin 0px;
background: #d92687;
}
.labi span:nth-child(92) {
animation-delay: 1.84s;
transform-origin: 18vmin 0px;
background: #d9267c;
}
.labi span:nth-child(93) {
animation-delay: 1.86s;
transform-origin: -18vmin 0px;
background: #d92671;
}
.labi span:nth-child(94) {
animation-delay: 1.88s;
transform-origin: 18vmin 0px;
background: #d92667;
}
.labi span:nth-child(95) {
animation-delay: 1.9s;
transform-origin: -18vmin 0px;
background: #d9265c;
}
.labi span:nth-child(96) {
animation-delay: 1.92s;
transform-origin: 18vmin 0px;
background: #d92651;
}
.labi span:nth-child(97) {
animation-delay: 1.94s;
transform-origin: -18vmin 0px;
background: #d92646;
}
.labi span:nth-child(98) {
animation-delay: 1.96s;
transform-origin: 18vmin 0px;
background: #d9263c;
}
.labi span:nth-child(99) {
animation-delay: 1.98s;
transform-origin: -18vmin 0px;
background: #d92631;
}
.labi span:nth-child(100) {
animation-delay: 2s;
transform-origin: 18vmin 0px;
background: #d92626;
}
@keyframes gerak {
1% {
z-index: 100;
}
60%, 100% {
z-index: 0;
transform: rotate(360deg);
}
}
</style>

Tutup

Rujukan CSS di codepen.io/Rplus/pen/KeXVXJ

Catatan oleh Orandableg Oktober 03, 2022

Dapatkan pautan
Facebook
X
Pinterest
E-mel
Apl Lain

Ulasan

Catat Ulasan

Translate

Popular Minggu Ini

Bendera Malaysia

Bendera Malaysia (Jalur Gemilang) Bendera merupakan lambang kepimpinan, simbol penghormatan, martabat dan kewarganegaraan bagi sebuah negara. Setiap negara mempunyai bendera yang tersendiri untuk mewujudkan perasaan bangga terhadap tanah air. Bendera ditakrifkan sebagai sebidang kain yang diperagakan bagi menunjukkan tanda dan lambang kewujudan yang juga dikenali sebagai panji dan obor. Bendera dalam budaya Melayu biasanya dikaitkan dengan kedudukan golongan Diraja yang memerintah.

Panduan Sembahyang

Cara Sembahyang Dengan Betul Haruslah diingat, ini adalah panduan. Dalam erti kata lain, anda telah pernah belajar sembahyang, cuma anda telah lupa pada bahagian-bahagian tertentu. Dan panduan ini dijadikan rujukan untuk memastikan amalan tersebut betul atau tidak. Namun jika anda tidak pernah sama sekali belajar sembahyang daripada seorang guru, maka adalah salah mengambil pelajaran mengenai sembahyang ini dari buku-buku panduan atau bahan bacaan semata-mata. Tetapi andaikata anda kesulitan mencari guru, bolehlah mengunakan panduan ini sebagai sumber pembelajaran yang pertama. Tetapi setelah anda rasa anda telah mengerti mengenainya, WAJIBlah merujuk kepada seorang yang anda kira arif mengenainya. Tidak kira siapa mereka, mungkin saja Ibu anda, Bapa anda atau saudara-mara, atau juga sahabat-sahabat anda. Pokoknya, wajib jugalah merujuk kepada seseorang mengenai apa yang telah anda pelajari melalui bahan-bahan bacaan dan panduan-panduan mengenai sembahyang ini. Cara sembahyang yang...

Tahun Lompat

Hari ini sepatutnya telah pun masuk ke tarikh 1 Mac, tetapi belum pula. Kenapa? .... 29.02.2024 01.03.2024 Sebabnya ialah tahun ini adalah Tahun Lompat (Leap Year ongputih kata. Juga dikenali sebagai 'intercalary year' atau 'bissextile year'). Tahun lompat merupakan tahun yang mengandungi lebih satu hari daripada tahun biasa bagi menyelaraskannya dengan tahun astronomi ataupun tahun yang bermusim. Perubahan tahun kalendar ini biasanya berlaku empat tahun sekali (2024, 2028, 2032, 2036, 2040 dan seterusnya), dimana bulan Februari mendapat penambahan satu hari (29 Februari), menolak 1 Mac ke hari seterusnya. Sains Tahun Lompat Mengapa kita mempunyai tahun lompat? Satu tahun kalendar lazimnya sepanjang 365 hari. Inilah yang dipanggil "tahun biasa", yang secara longgar menentukan bilangan hari yang diperlukan Bumi untuk melengkapkan satu orbit mengelilingi Matahari. Tetapi 365 ini adalah nombor bulat (angka paling hampir). Bumi sebenarnya mengambil...

Serangga dan ulat dijadikan makanan

Satu pasangan di Tokyo, Shoichi dan Chisato Uchiyama menyediakan hidangan sushi yang luar biasa, yang pasti tidak semua orang sanggup untuk memakannya. Nak tahu kenapa? Cuba lihat gambar di bawah, sajian yang mereka buat.

Istilah 'mantan'

2011/06/07 JELEBU: Menteri Penerangan Komunikasi dan Kebudayaan, Datuk Seri Dr Rais Yatim, hari ini meminta supaya penggunaan istilah "mantan" untuk merujuk kepada bekas Perdana Menteri atau bekas Ketua Polis Negara, dikaji semula. Beliau berkata, istilah mantan itu digunakan secara meluas di Indonesia dan sebenarnya ia memberi maksud "orang yang tidak bekerja". "Kita di sini tanpa usul periksa suka mengambil perkataan luar seperti mantan. Janganlah kita begitu mudah meniru perkataan dari Indonesia tanpa faham erti sebenarnya," katanya ketika berucap merasmikan mesyuarat Persatuan Bekas Polis Malaysia di Dewan Petaling hari ini. Beliau hairan mengapa sesetengah pihak di negara ini terlalu beria-ia mengambil bahasa luar untuk disesuaikan dengan keadaan

Kanak-kanak menyusu terus dari lembu

Adalah perkara biasa jika kita mendengar ada orang mengatakan anak mereka 'menyusu', 'menetek', 'minum susu botol' atau 'minum susu lembu'. Ada juga yang kata 'hisap susu botol'. Biasa je tu. Tapi kalau kita dengar, 'hisap tetek lembu'.. haa, ini baru boleh kita anggap pelik dan terkeluar dari biasa. Nak dijadikan cerita, ada seorang kanak-kanak di perkampungan Pheas di wilayah Siem Reap, Kemboja, 195 batu dari Phnom Penh yang menghisap susu lembu atau lebih tepat lagi, menghisap tetek lembu! Tha Sophat, kanak-kanak berusia 18 bulan yang tinggal bersama datuknya dikatakan mula minum susu lembu 'terus dari sumber' sejak beberapa bulan lepas setelah kedua ibubapanya pergi ke Thailand untuk bekerja. Sophat dibiarkan menghisap susu lembu oleh datuknya Jiran dan penduduk sekampung tidak senang dengan cara penyusuan Sophat tapi menurut datuknya, Um Oeung: Kesihatannya baik, dia kuat dan dia tidak mendapat cirit-birit. # ...

33 pelombong Chile berjaya diselamatkan

LOMBONG SAN JOSE, Chile: Sorakan, teriakan dan tangisan gembira anggota keluarga memenuhi suasana ketika seorang demi seorang daripada 33 pelombong Chile diselamatkan dan dibawa keluar menggunakan lif khas, sejak mereka terperangkap kira-kira 600 meter di bawah lombong yang runtuh sejak lebih dua bulan lalu. Pelombong pertama berjaya dibawa keluar ialah Florencio Avalos yang memakai topi keselamatan dan berkaca mata hitam bagi melindungi pandangannya daripada sinaran matahari. Dia tersenyum lebar sebaik keluar, memeluk anak lelakinya, Bairon, 7 dan isterinya sebelum menerima pelukan Presiden Chile, Sebastian Pinera, sejurus selepas tengah malam waktu tempatan. Pelombong kedua, Mario Sepuldeva Espina, ditarik ke permukaan kira-kira sejam kemudian. Laungannya dapat didengar walaupun sebelum sebuah lif yang direka khas yang membawanya muncul. Selepas memeluk isterinya, dia menghulurkan batu yang dibawanya dari ‘penjara bawah tanah’ sebagai cenderahati kepada penyelamat yang ketawa ...

Gambar Osama Bin Laden yang mati dengan kesan tembakan di kepala..

'Osama Bin Laden' Gambar yang dikatakan Osama Bin Laden (di atas) ku jumpa di satu laman web ongputih (blog) petang semalam. Maka beria-ia benar lah aku save, untuk ku update post yang sebelum ini dengan memasukkan gambar berkenaan.

Tukar tayar basikal

Pagi hari Sabtu lalu aku hantar basikal anak ku ke sebuah kedai basikal di bandar untuk tukar tayar yang dah botak tambahan bocor pula. Maklum la budak dah nak naik sekolah setelah cuti seminggu. Gambar hiasan. Basikal hybrid . Pada petangnya aku datang semula untuk mengambil basikal. Sampai je, aku tanya apek kedai berkenaan, "Sudah siap gua punya basikal? "Sudah", dia jawab. "Kena berapa ringgit tauke?", aku tanya lagi. "Sembilan lapan", katanya bermaksud kena 98 ringgit le tu. "Wah! Manyak mahat", aku yang terperanjat bercakap ikut slang Cina. "Kira patut.. tukar tayar sama tiub dua, tukar tali brek satu. Lagi itu ada goyang-goyang semua saya sudah kasi repair. Sudah baik-baik mau pakai", kata apek tu. "Iya la. Tukar tayar sama itu sikit-sikit takkan sampai ini macam harga. Ini basikal biasa budak pakai punya, bukan basikal Simano", aku mula keluarkan point nak mintak kurang kerana ku rasa harganya terlalu t...