Kuasai seni CSS satu elemen dengan membuat simbol Yin-Yang klasik yang berputar. Tutorial ini menguraikan cara menggunakan gradien, elemen semu (pseudo-elements), dan keyframe CSS untuk membuat geometri kompleks tanpa gambar.
hibuno
••2 min read•
#css#animasi#yin yang#pseudo-elements#gradien
Preview
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Dalam tutorial ini, kita akan membuat simbol Yin-Yang yang berputar. Meskipun terlihat seperti grafik yang rumit, simbol ini dapat dibangun sepenuhnya menggunakan CSS dan satu elemen HTML saja. Ini adalah latihan yang sempurna untuk memahami elemen semu (::before dan ::after) dan gradien CSS.
[Gambar geometri simbol Yin Yang]
Logika
Untuk membangun Yin-Yang tanpa gambar, kita perlu memikirkan geometrinya:
Dasar (Base): Sebuah lingkaran utama yang dibagi menjadi dua warna (hitam dan putih).
Pusaran (Swirls): Dua lingkaran lebih kecil yang ditempatkan di garis tengah. Satu lingkaran menyesuaikan warna atas tetapi memiliki titik kontras; yang lainnya menyesuaikan warna bawah.
1. HTML
Kita hanya membutuhkan satu wadah (container). Kita akan menggunakan sebuah div dengan kelas yin-yang.
<div class="balance"></div>
2. CSS
Pertama, kita atur gaya untuk bodi utamanya. Alih-alih menggunakan trik border yang rumit, kita menggunakan linear-gradient untuk membagi latar belakang secara sempurna menjadi dua bagian.
Sekarang kita gunakan ::before dan ::after untuk membuat dua lingkaran di dalam. Kita menggunakan trik border di sini: background-color menciptakan titik kecil di dalam, sedangkan border menciptakan bagian pusaran lingkaran tersebut.
/* The top white/black swirl with a black dot */
.balance::before,
.balance::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12.5px; /* The size of the inner dot */
height: 12.5px;
background-color: white;
border: 18.8px solid black; /* The border creates the black head */
border-radius: 100%;
box-sizing: content-box;
}
.balance::after {
left: 50%;
background-color: black;
border-color: white; /* The border creates the white head */
}
4. Animasi
Terakhir, kita definisikan keyframes untuk membuat simbol berputar terus menerus.
Dengan menggabungkan gradien linear pada elemen induk dan elemen semu yang dipusatkan menggunakan border tebal, kita berhasil membuat animasi Yin-Yang yang skalabel dan tidak pecah (resolution-independent) tanpa menggunakan JavaScript sama sekali.
Membuat Animasi Loading Yin-Yang dengan CSS | Hibuno