Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Inspirasi: 10 Contoh Animasi CSS Tulen pada CodePen

by
Length:ShortLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Pelayar mudah alih kami terus mendapat lebih kuat dan lebih baik pada menunjukkan kami animasi yang menakjubkan dan indah. Apabila digabungkan dengan kuasa susun atur CSS, ada kemungkinan untuk mencipta beberapa kerja cantik tanpa menggunakan sebarang imej sama sekali. Hasilnya adalah berskala, cepat-loading, dan baik, mengesankan untuk dilihat.

Mari kita lihat apa yang menakjubkan orang membuat dan menghidupkan dengan hanya HTML dan CSS.

1. Biker CSS tulen

Terdapat begitu banyak perkara yang berlaku di sini sukar untuk mempercayainya ia hanya HTML dan CSS! Berputar animasi dan pelbagai, pergerakan berlapis menggabungkan untuk menjadikannya kelihatan seperti pelumba ini dan basikalnya dibuat daripada jeli. Penggunaan BEM baik dalam penamaan kelas juga!

2. Pure CSS Saturn Hula Hooping

Menggabungkan banyak bahagian yang bergerak boleh membuat satu set elemen HTML yang mudah kelihatan seperti animasi yang lebih kompleks, dan itulah sesuatu demo ini berfungsi dengan baik. Lihat bagaimana kedua-dua planet berinteraksi, manakala 'zarah' gelung hanya berselerak untuk kelihatan rawak.

3. Warna Layers CSS Animation

Lapisan berwarna mudah mungkin kelihatan tidak banyak, tetapi apabila mereka bergerak, mereka dapat menyampaikan banyak watak. Dalam contoh ini, satu set tag perenggan HTML separa telus dinyalakan, dan animasi yang disusun yang dihasilkan adalah hipnosis.

4. Loader Ice-Cream

Kami tidak semestinya memerlukan JPG atau PNG untuk membuat imej yang cantik, dan ini satu lagi contoh. Satu bekas div dan empat yang lain hanya diperlukan untuk membuat imej loader yang bertemakan ais krim yang menarik ini. Kod yang dihasilkan jauh lebih kecil daripada GIF animasi.

5. Merpati CSS Murni

Apabila anda menggabungkan penggunaan elemen HTML dengan beberapa animasi yang penuh aksara, ini adalah hasilnya. Animasi luar biasa yang licin namun sibuk penuh keseronokan. Sangat menghormati Julia Muzafarova kerana apa yang telah menjadi sangat fiddly kerja membina semua set kunci utama. Lebih daripada kopi juga!

6. Kucing Tidur

Membawa bersama banyak elemen HTML mudah dengan sekumpulan animasi yang halus, menyeronokkan, kucing yang mengantuk ini mempunyai banyak karakter. Contoh ini menggunakan Sass, dan pemboleh ubah untuk mengawal animasi. Cuba ubah sesetengah untuk melihat apa yang berlaku!

7. Black Bear

Animasi lancar boleh dicapai apabila menggunakan HTML dan CSS, terutama apabila kita mengikuti beberapa prinsip asas. Animasi ini menyimpan bilangan unsur minimum, dan menggunakan banyak perubahan.

8. Sponge Sponge

Animasi cepat boleh menambah banyak watak apabila digabungkan. Dalam demo ini, lihat bagaimana gelembung dan percikan dikelilingi bersama untuk membuat animasi comel dengan span gembira, semuanya tanpa sebarang imej.

9. Mailbox Peti Murni CSS

Satu siri animasi keyframe boleh menceritakan kisah atau membantu orang memahami apa yang mereka cari. Di sini kita melihat buka sampul surat dan dapatkan surat.

10. Penjagaan Preloader

Sedikit pergerakan halus boleh membuat perasaan intensiti yang hebat! Pemuat ini mempunyai kereta yang kelihatan seperti ia mempercepatkan, semuanya dibuat dengan beberapa unsur dan animasi CSS. Dengan tiada imej ini akan memuatkan dengan cepat.

Dapatkan inspirasi!

Terima kasih seperti sentiasa CodePen dan minda kreatif di belakang demo ini; mereka sudah tentu memberi kami banyak inspirasi dalam contoh animasi ini. Lihat siaran berikut untuk lebih banyak perkara yang sama, dan belajar cara membuat animasi CSS anda sendiri!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.