Langkau ke kandungan utama

Blog OG

Cari Blog Ini

Animasi petak

Dapatkan pautan
Facebook
Twitter
Pinterest
E-mel
Apl Lain

Pamer

<div class="labu">
<div class="labi">
<div class="joget">
<i></i><i></i><i></i><i></i>
<div class="cube cube_A">
<i></i><i></i><i></i><i></i>
<div class="cube cube_B">
<i></i><i></i><i></i><i></i>
<div class="cube cube_C">
<i></i><i></i><i></i><i></i>
</div>
</div>
<div class="cube cube_D">
<i></i><i></i><i></i><i></i>
<div class="cube cube_E">
<i></i><i></i><i></i><i></i>
<div class="cube cube_F">
<i></i><i></i><i></i><i></i>
</div>
</div>
</div>
</div>
<div class="cube cube_A">
<i></i><i></i><i></i><i></i>
<div class="cube cube_B">
<i></i><i></i><i></i><i></i>
<div class="cube cube_C">
<i></i><i></i><i></i><i></i>
</div>
</div>
<div class="cube cube_D">
<i></i><i></i><i></i><i></i>
<div class="cube cube_E">
<i></i><i></i><i></i><i></i>
<div class="cube cube_F">
<i></i><i></i><i></i><i></i>
</div>
</div>
</div>
</div>
<div class="cube cube_A">
<i></i><i></i><i></i><i></i>
<div class="cube cube_B">
<i></i><i></i><i></i><i></i>
<div class="cube cube_C">
<i></i><i></i><i></i><i></i>
</div>
</div>
<div class="cube cube_D">
<i></i><i></i><i></i><i></i>
<div class="cube cube_E">
<i></i><i></i><i></i><i></i>
<div class="cube cube_F">
<i></i><i></i><i></i><i></i>
</div>
</div>
</div>
</div>
<div class="cube cube_A">
<i></i><i></i><i></i><i></i>
<div class="cube cube_B">
<i></i><i></i><i></i><i></i>
<div class="cube cube_C">
<i></i><i></i><i></i><i></i>
</div>
</div>
<div class="cube cube_D">
<i></i><i></i><i></i><i></i>
<div class="cube cube_E">
<i></i><i></i><i></i><i></i>
<div class="cube cube_F">
<i></i><i></i><i></i><i></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.labu *, .labu *::before, .labu *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
.labu {
background-image: radial-gradient(circle, #fff, #777 100vmin);
min-height: 88vh;
display: grid;
place-items: center;
perspective: 1600px;
overflow: hidden;
}
@media screen and (max-width: 600px) {
.labu {
min-height: 60vh;
}
}
.labu *:not(:empty) {
transform-style: preserve-3d;
}
.labi {
position: relative;
-webkit-animation: labi 20s infinite linear;
animation: labi 20s infinite linear;
}
@-webkit-keyframes labi {
from {
transform: rotate(0deg) rotateX(30deg) rotate(360deg);
}
to {
transform: rotate(360deg) rotateX(30deg) rotate(0deg);
}
}
@keyframes labi {
from {
transform: rotate(0deg) rotateX(30deg) rotate(360deg);
}
to {
transform: rotate(360deg) rotateX(30deg) rotate(0deg);
}
}
.joget {
position: relative;
font-size: 5vmin;
width: 2em;
aspect-ratio: 1;
-webkit-animation-name: joget;
animation-name: joget;
--background-color: #fff;
}
@-webkit-keyframes joget {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(-22.5deg) scale(0.95);
}
50% {
transform: rotate(-45deg) scale(0.9);
}
75% {
transform: rotate(-67.5deg) scale(0.95);
}
100% {
transform: rotate(-90deg) scale(1);
}
}
@keyframes joget {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(-22.5deg) scale(0.95);
}
50% {
transform: rotate(-45deg) scale(0.9);
}
75% {
transform: rotate(-67.5deg) scale(0.95);
}
100% {
transform: rotate(-90deg) scale(1);
}
}
.cube {
position: absolute;
width: 100%;
aspect-ratio: 1;
transform-origin: -1% -1%;
}
.cube_A {
left: 51%;
top: 51%;
-webkit-animation-name: cube_A;
animation-name: cube_A;
--background-color: hsl(calc(var(--i) * 90) 50% 56%);
}
.cube_A:nth-child(5) {
--i: 0;
}
.cube_A:nth-child(6) {
--i: 1;
}
.cube_A:nth-child(7) {
--i: 2;
}
.cube_A:nth-child(8) {
--i: 3;
}
@-webkit-keyframes cube_A {
0% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(0deg);
}
50% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(90deg);
}
100% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(180deg);
}
}
@keyframes cube_A {
0% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(0deg);
}
50% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(90deg);
}
100% {
transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(180deg);
}
}
.cube_B {
left: 102%;
top: 0%;
-webkit-animation-name: cube_negative;
animation-name: cube_negative;
--background-color: hsl(calc(var(--i) * 90 - 45) 50% 56%);
}
.cube_C {
left: 102%;
top: 0%;
transform-origin: -1% 101%;
-webkit-animation-name: cube_positive;
animation-name: cube_positive;
--background-color: hsl(calc(var(--i) * 90 - 67.5) 100% 56%);
}
.cube_D {
left: 0%;
top: 102%;
transform-origin: 101% -1%;
-webkit-animation-name: cube_negative;
animation-name: cube_negative;
--background-color: hsl(calc(var(--i) * 90) 100% 56%);
}
.cube_E {
left: 102%;
top: 0%;
transform-origin: -1% 101%;
-webkit-animation-name: cube_positive;
animation-name: cube_positive;
--background-color: hsl(calc(var(--i) * 90 - 22.5) 100% 56%);
}
.cube_F {
left: 102%;
top: 0%;
-webkit-animation-name: cube_negative;
animation-name: cube_negative;
--background-color: hsl(calc(var(--i) * 90 - 45) 100% 56%);
}
@-webkit-keyframes cube_negative {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes cube_negative {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
@-webkit-keyframes cube_positive {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes cube_positive {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.joget, .cube {
box-shadow: 0 0 2em #000a, 0 0 1em #000a inset;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}
.joget i, .cube i {
position: absolute;
inset: 0;
background-color: var(--background-color);
background-image: linear-gradient(transparent, #000a);
box-shadow: 0 0 1em #000a inset;
}
.joget i:nth-child(1), .cube i:nth-child(1) {
transform: rotateX(-90deg) rotateY(0deg) translateZ(1em) translateY(-1em);
}
.joget i:nth-child(2), .cube i:nth-child(2) {
transform: rotateX(-90deg) rotateY(90deg) translateZ(1em) translateY(-1em);
}
.joget i:nth-child(3), .cube i:nth-child(3) {
transform: rotateX(-90deg) rotateY(180deg) translateZ(1em) translateY(-1em);
}
.joget i:nth-child(4), .cube i:nth-child(4) {
transform: rotateX(-90deg) rotateY(270deg) translateZ(1em) translateY(-1em);
}
</style>

Rujukan CSS di codepen.io/amit_sheen/pen/XWGpJOV

Catatan oleh Orandableg Januari 20, 2024

animasi bagaimana css kiub

Dapatkan pautan
Facebook
Twitter
Pinterest
E-mel
Apl Lain

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.

Gambar anak beruang panjat pokok

Gambar sekumpulan anak-anak beruang yang comel memanjat pokok.

Haiwan juga menyamar

Menyamar.. bukan orang saja yang boleh menyamar, haiwan pun pandai. Ada haiwan yang menyamar untuk mengelak dari dikesan oleh pemangsa. Ada haiwan yang menyamar untuk mendapatkan mangsa dan ada haiwan menyamar untuk kedua-duanya sekali. Kita lihat bagaimana haiwan-haiwan ni menyamar: Seekor cicak di taman negara di utara Madagaskar. Eh! Mana cicaknya?

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

(Gambar) Dipetik dari kalendar keluarga

3:15 ptg 02.03.2024

Ikan Terbang

Biasanya ikan ini terbang untuk mengelak dari ditangkap oleh pemangsa seperti ikan yang lebih besar. Pada dasarnya, ikan ini tidak terbang seperti burung yang menggerakan sayap, tapi ia meluncur dengan sayap yang hanya dilebarkan

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

Dari wad 8 (snapshot dari henfon)

7:22, 28-05-2020.

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

Emoji: Bagaimana perasaan anda hari ini

Bolehkah emoji digunakan ketika kita berbual sebagaimana ketika kita berchatting di sosmed? Ali : Hai Mat! Amacam kau sekarang? Ahmad : Baik.. emoji aku tahap tiga poin lima. Kau camna? Ali : Err.. macam biasa. Takat dua je. Ahmad : Eh, kenapa? Ali : Alaa.. bla bla bla.. Demo (emoji pelbagai mood) Bagaimana perasaan anda hari ini 0|0.5|1|1.5|2|2.5|3|3.5|4|4.5|5 Sedih ↔ Scale: agak² ↔ Gembira HTML view ▼ <div class="labu"> <form class="fr" action=""> <label class="fr__label" for="face-rating">Bagaimana perasaan anda hari ini</label> <div class="fr__face" role="img" aria-label="Straight face"> <div class="fr__face-right-eye" data-right></div> <div class="fr__face-left-eye" data-left></div> <div class="fr__face-mouth-lower" data-mouth-lower></div&

Dikuasakan oleh Blogger

Hak Cipta Terpelihara. Blog OG adalah nama blog oleh Orandableg.