Buat seni animasi CSS

Sep 14, 2025

Bagaimana caranya

(Kredit Gambar: Tiffany Choong)

Membuat gambar CSS adalah cara yang menyenangkan untuk mempraktikkan keterampilan Anda dan menciptakan karya seni yang rapi. Ini istirahat yang bagus dari gaya komponen web yang biasa sehari-hari. Semua yang harus Anda mulai adalah dokumen kosong dan file CSS; Kami merekomendasikan menggunakan SASS, yang akan memungkinkan Anda untuk menggunakan kembali gaya Anda dan menulis pemilih yang lebih sederhana (lihat panduan kami untuk Apa itu SASS? untuk mempelajari lebih lanjut tentang preprocessor ini).

Kami akan mulai dengan beberapa tips atas untuk menguasai seni CSS, kemudian menunjukkan kepada Anda bagaimana membuat ulang balon animasi ini pikachu hanya menggunakan CSS (pastikan Anda menyimpan file Anda dengan baik penyimpanan awan ).

Untuk inspirasi, jelajahi pengumpulan luar biasa kami CSS Animasi Contoh. . Setelah sesuatu yang lebih mendasar? Mulailah dengan belajar Cara Membuat Es Lolly Menggunakan CSS .

Atau, jika Anda memulai situs baru, parit kompleksitas dengan brilian Pembangun Situs Web dan pastikan Anda mendapatkan hosting web. tepat.

Kurangi desain ke bentuk sederhana

Saat membuat seni CSS, dapat membantu untuk melihat beberapa gambar referensi untuk inspirasi dan kemudian membuat variasi kartun yang disederhanakan saat Anda mengikuti, membayangkan subjek menggunakan bentuk primitif, yang membuat lebih baik Bentuk CSS. .

Gunakan latar belakang yang cerah untuk membantu pemosisian

Ketika tumpang tindih bentuk warna serupa, sulit untuk melihat di mana mereka ditempatkan atau seperti apa penampilan mereka. Itu berguna untuk memiliki bentuk yang Anda kerjakan menonjol dengan mengubah warna latar belakang Untuk sesuatu yang cerah dan ceria, seperti Magenta. Ini memungkinkan Anda untuk dengan mudah melihat posisi dan bentuk elemen Anda dengan mudah.

Gunakan ukuran cairan

Ketika datang untuk mendefinisikan nilai PX untuk properti, kami akan merekomendasikan menggunakan unit REM. Jika Anda memutuskan bahwa Anda ingin keseluruhan Anda lebih besar atau lebih kecil, dengan menggunakan unit REM, Anda hanya perlu mengubah basis html {ukuran font: ... px} Di SASS Anda untuk skala seluruh karya seni naik atau turun.

Ketika mendefinisikan ketinggian dan lebar elemen anak yang seharusnya memiliki ukuran relatif ke induk, persentase berguna. Karena nilai-nilai ini selalu relatif terhadap orang tua mereka, mereka juga harus skala dengan Ukuran font HTML .

Generate CSS — Hasilkan CSS adalah konferensi yang dipesan lebih dahulu dibawa kepada Anda oleh Kreatif Bloq, Net dan Desainer Web. Klik untuk memesan tiket burung awal Anda! (Kredit Gambar: Getty / Future)

01. Mulai dengan wadah

Wadah pembungkus untuk memegang karya seni adalah tempat yang baik untuk memulai. Dalam wadah, kita dapat menempatkan tiga wadah batin - kepala, tubuh dan balon.

 & lt; div class = "wadah" & gt;
& lt; div class = "kepala" & gt; & lt; / div & gt;
& lt; kelas div = "tubuh" & gt; & lt; / div & gt;
& lt; div class = "balon" & gt; & lt; / div & gt;
& lt; / div & gt;

Wadah biasanya harus Posisi: Relatif. untuk memungkinkan elemen lain ditempatkan relatif di dalamnya menggunakan Posisi: Absolute. dan memiliki tinggi dan lebar yang terdefinisi dengan baik, jika tidak memposisikan elemen anak menjadi sulit.

Dalam gaya Anda, tambahkan warna dasar Anda sebagai variabel SASS untuk digunakan kembali. Sass. meringankan() dan menggelapkan() Fungsi akan membuat warna dan nuansa warna Anda, yang dapat digunakan sebagai highlight atau bayangan untuk karakter Anda.

02. Gaya kepala

Dengan struktur tahu, mari kita gaya kepala terlebih dahulu. Dalam hal ini, kepala membuat titik pusat yang bagus untuk karya seni, jadi alih-alih menetapkan posisinya ke absolut, itu dapat diatur ke relatif. Ini memungkinkan wadah memiliki elemen stabil di dalamnya, memberikan elemen mutlak mengambang lainnya titik jangkar dan dengan demikian lebih banyak kontrol atas posisi mereka.

Fitur-fitur wajah akan membutuhkan wadah untuk memposisikan, jadi buat a & lt; div & gt; Di dalam wadah kepala untuk bentuk kuning dengan lebar, tinggi dan warna latar belakang - sekarang mari kita buat persegi panjang ini terlihat lebih seperti bentuk kepala. Salah satu sifat paling umum dan bermanfaat dalam seni CSS adalah BORDER-RADIUS. Properti, yang mengubah kurva x atau y dari sudut kotak dan dapat digunakan untuk membuat lebih banyak bentuk organik.

Dengan menggunakan teknik ini dengan kombo REM dan persentase, Anda dapat membuat bentuk seperti gumpalan daripada hanya elips polos, skala alami dengan html. {Ukuran font: ... px} :

 .face {
BORDER-TOPS-LEFT-RADIUS: 50% 4.5REM;
Radius Border-Top-Right-Right: 50% 4.5REM;
batas-bawah-bawah-radius: 50% 3REM;
Border-Bottom-Right-Radius: 50% 3REM;
...
}

Setelah menyempurnakan kepala BORDER-RADIUS. , Posisikan sisa fitur wajah sebagai elemen anak kepala, seperti mata, pipi, hidung dan telinga. Seperti kepala, BORDER-RADIUS. Trik akan berguna sejak itu BORDER-RADIUS: 50% mungkin tidak terlihat menarik.

03. Pindah ke tubuh

Sebuah tubuh & lt; div & gt; dapat ditempatkan di dalam wadah tubuh di belakang kepala dan berbentuk dengan yang sama BORDER-RADIUS. teknik, serta lengan, kaki dan ekor. Untuk memungkinkan tumpang tindih yang tepat, tubuh yang sebenarnya harus menjadi elemennya sendiri, karena elemen dalam tertentu seperti garis-garis belakang perlu dipotong Overflow: Hidden. . Untuk memberi tubuh lebih mendalam, Transformasi: Scew () Properti bisa sedikit tubuh sedikit.

Ekor petir dapat dibangun menggunakan tiga persegi panjang terpisah daripada mencoba membentuk bentuk ini dari satu elemen. Persegi panjang dapat diputar dan diposisikan di atas satu sama lain untuk membentuk baut. Lengan dan kaki dapat menggunakan warna primer yang lebih gelap yang kami buat menggunakan SASS menggelapkan() Jadi mereka menonjol.

04. Tambahkan Balon

Sekarang mouse listrik selesai, mari kita ikat balon ke punggungnya. Tambahkan beberapa & lt; div & gt; s dengan gaya bersama dengan string anak & lt; div & gt; dan memposisikan mereka berkumpul di atas kepala. String tidak terlihat kecuali a Border-Left. , yang membantu membuatnya terlihat lebih seperti string.

Untuk mengikat tali di sekitar pinggang karakter, a & lt; div & gt; dapat ditempatkan di dalam tubuh untuk memungkinkan penentuan posisi yang tepat. String membutuhkan sedikit kurva untuk muncul seolah-olah diikat di sekitar tubuh, sehingga dapat memiliki tinggi badan kecil, batas batas dan seorang batas batas Radius kiri dan kanan, yang membuat garis tipis melengkung:

 .String {
Tinggi: 1REM;
Lebar: 9REM;
Border-Right: padat 1px $ putih;
BORDER-LEFT: Padat 1px $ putih;
Border-bottom: padat 1px $ putih;
Border-Bottom-Left-Radius: 50% 1REM;
Border-Bottom-Right-Radius: 50% 1REM;
}

05. Animasi CSS

Kita dapat memberikan kehidupan karakter dengan menambahkan @Keyframes. animasi. Lengan, kaki, telinga dan ekor dapat dianimasikan Transformasi: Putar () . Memastikan Transformasi-Asal diatur ke 'Joint' (I.E. TOP CENTS FOR A LEG) dan sesuaikan rotasi. Jenis animasi ini dapat digunakan beberapa kali dalam mixin sass:

 @mixin animatotate ($ Name, $ Mulai, $ end) {
@Keyframes # {$ name} {
0%, 100% {Transform: Rotate (# {$ start} deg)}
50% {Transform: Rotate (# {$ end} deg)}
}
}

Akhirnya, menambahkan 5s yang lambat Transformasi: Translatey () Animasi keyframe akan menghidupkan dan turun seolah-olah itu mengambang. Untuk sentuhan realisme, animasi berkedip menggunakan Transformasi: Skala (0,1) Properti dapat digunakan untuk membuatnya tampak seolah-olah mata menutup.

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif bersih . Beli Masalah 283. atau langganan .

Baca lebih lajut:

5 hal yang tidak pernah Anda ketahui tentang CSS
Tambahkan filter SVG dengan CSS
Cara kode efek teks pintar dengan CSS

Buat seni animasi CSS

01. Mulai dengan wadah

02. Gaya kepala

03. Pindah ke tubuh

04. Tambahkan Balon

05. Animasi CSS

Bagaimana caranya - Artikel Terpopuler

PureF: Cara Menggunakan Alat Referensi Gambar

Cara menggambar bulu

Buat tekstur hantu dengan teknik media campuran

Master alat pisau

mensimulasikan transformasi pengendara hantu

Bangun UI berbasis kartu dengan Yayasan

Cara Memulai dengan Lukisan Minyak

15 Tips untuk Optimasi Cross-Device

Kategori