Langkau ke kandungan utama

Blog OG

Cari Blog Ini

Bebola cincin dengan animasi

Dapatkan pautan
Facebook
Twitter
Pinterest
E-mel
Apl Lain

Demo

<div class="krgkan">
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div>
<div class="base">
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
</div></div><br/>
https://codepen.io/mknadler/pen/VajOdo
<style>
.krgkan {
background: #45818e;
height: 400px;
position: relative;
}
.base {
width: 300px;
height: 300px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.circ {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid white;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.base .circ:nth-child(1) {
transform: translate(75px, 0);
}
.base .circ:nth-child(2) {
transform: translate(0, 75px);
}
.base .circ:nth-child(3) {
transform: translate(-75px, 0);
}
.base .circ:nth-child(4) {
transform: translate(0, -75px);
}
.base .circ:nth-child(5) {
transform: translate(53.0325px, 53.0325px);
}
.base .circ:nth-child(6) {
transform: translate(53.0325px, -53.0325px);
}
.base .circ:nth-child(7) {
transform: translate(-53.0325px, 53.0325px);
}
.base .circ:nth-child(8) {
transform: translate(-53.0325px, -53.0325px);
}
.base:nth-child(2) {
transform: rotate(0.1turn);
}
.base:nth-child(2) {
transform: rotate(0.2turn);
-webkit-animation: turn-2 6s ease-in-out infinite alternate;
animation: turn-2 6s ease-in-out infinite alternate;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes turn-2 {
to {
transform: rotate(0.25urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-2 {
to {
transform: rotate(0.25urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(2) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(3) {
transform: rotate(0.3turn);
-webkit-animation: turn-3 6s ease-in-out infinite alternate;
animation: turn-3 6s ease-in-out infinite alternate;
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
@-webkit-keyframes turn-3 {
to {
transform: rotate(0.375urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-3 {
to {
transform: rotate(0.375urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(3) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(4) {
transform: rotate(0.4turn);
-webkit-animation: turn-4 6s ease-in-out infinite alternate;
animation: turn-4 6s ease-in-out infinite alternate;
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
@-webkit-keyframes turn-4 {
to {
transform: rotate(0.5urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-4 {
to {
transform: rotate(0.5urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(4) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(5) {
transform: rotate(0.5turn);
-webkit-animation: turn-5 6s ease-in-out infinite alternate;
animation: turn-5 6s ease-in-out infinite alternate;
-webkit-animation-duration: 7.5s;
animation-duration: 7.5s;
}
@-webkit-keyframes turn-5 {
to {
transform: rotate(0.625urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-5 {
to {
transform: rotate(0.625urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(5) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(6) {
transform: rotate(0.6turn);
-webkit-animation: turn-6 6s ease-in-out infinite alternate;
animation: turn-6 6s ease-in-out infinite alternate;
-webkit-animation-duration: 9s;
animation-duration: 9s;
}
@-webkit-keyframes turn-6 {
to {
transform: rotate(0.75urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-6 {
to {
transform: rotate(0.75urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(6) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(7) {
transform: rotate(0.7turn);
-webkit-animation: turn-7 6s ease-in-out infinite alternate;
animation: turn-7 6s ease-in-out infinite alternate;
-webkit-animation-duration: 10.5s;
animation-duration: 10.5s;
}
@-webkit-keyframes turn-7 {
to {
transform: rotate(0.875urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-7 {
to {
transform: rotate(0.875urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(7) .circ {
background: rgba(0, 0, 0, 0.05);
}
.base:nth-child(8) {
transform: rotate(0.8turn);
-webkit-animation: turn-8 6s ease-in-out infinite alternate;
animation: turn-8 6s ease-in-out infinite alternate;
-webkit-animation-duration: 12s;
animation-duration: 12s;
}
@-webkit-keyframes turn-8 {
to {
transform: rotate(1urn);
}
from {
transform: rotate(0);
}
}
@keyframes turn-8 {
to {
transform: rotate(1urn);
}
from {
transform: rotate(0);
}
}
.base:nth-child(8) .circ {
background: rgba(0, 0, 0, 0.05);
}
</style>

Demo ini dipetik dari codepen

Catatan oleh Orandableg Julai 05, 2022

animasi bagaimana corak css

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.

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

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?

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

Suku Orang Asli yang tak mengenal dunia luar

Pada awal 2008, satu penerbangan ekspedisi telah menemukan satu kaum orang asli, di daerah Envira, hutan tebal di antara Brazil dan Peru. Kewujudan mereka merupakan satu misteri. Belum pernah diketahui tentang mereka sebelum ini.

Gambar pekerja zoo memberi makan buaya

Pekerja sedang memberikan makanan kepada buaya di Zoo Malabon, Manila. Bayangkan lah kalau pekerja zoo tu terjatuh..

Labah-labah.gif

Gambar ↑ .gif labah-labah ni saya main kebas je di internet (lupa dari mana), lama dah tersimpan. Di sini gambar gif berkenaan saya tambahkan warna latar belakang, tag marquee dan beberapa stail yang lain. Maka jadilah ia sebuah sketsa yang saya namakan, Satu perjalanan .. Phh.. Lihat teks HTML <h3>Satu perjalanan ..</h3> <div style="background: linear-gradient(170deg, #78878f, #9baab3, #bec0c2, #8f979c, #bec0c2, #95a5ad); border-radius: 12px; border: 1px solid #ddd; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px 10px; color: #523436;"> <marquee direction="left" scrollamount="8"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvGjaFvspIJ31G-S8MMwLdBEC8XRW5-5fuxEw3A78LO7wmKCsllrFcgN29I99BYls6zMoSQChE5gA41ipaKWDWLQnJdfifTJovi2AO4QBZIi8tZ2QprmJfjB-c7JBwzP3ww0yHJ62-Vk/s60/labah-labah.gif" /></marquee> <br/

Antara gambar haiwan laut dari Sea Census

Spesimen ini, ikan 'fathead sculpin' ditemui di perairan New Zealand pada 2003, semasa satu ekspedisi. Digelar 'Mr. Blobby', ikan ini mendiami lautan Atlantic, Hindi, dan Pacific pada kedalaman di antara 330 kaki (100 meter) hingga 9,200 kaki (2,800 meter).

Spesies ikan yang ada 'tangan'

Ikan ini tidak menggunakan siripnya untuk berenang, tetapi untuk berjalan di dasar laut. Baru-baru ini diadakan satu pengumuman saintifik berkenaan sembilan spesies ikan ini dijelaskan sebagai kumpulan 'handfish'. Penentuan spesies adalah berdasarkan beberapa faktor, termasuk jumlah tulang dan sirip, warna, sisik dan duri, dan kadar ukuran, menurut Daniel Gledhill dari CSIRO (Commonwealth Scientific and Industrial Research Organisation) Australia. Berbanding spesies ikan lain, ikan ini kurang diketahui tentang biologi dan perilaku kerana belum banyak kajian dibuat ke atas ikan tersebut. Ikan ini bergerak perlahan, mudah ditangkap oleh pemangsa, tapi penyelidik berpendapat 'handfish' mempunyai senjata rahsia: kulit beracun. Handfish merah yang hanya boleh ditemui di sekitar pulau di selatan Tasmania. Semua spesies 'handfish' yang diketahui setakat ini, hanya ditemui di sekitar laut cetek tenggara Australia. Ikan Belodok = Ikan Temakul = Handfish(?)

Dikuasakan oleh Blogger

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