8 CSS Snippets untuk Pencinta Haiwan

Salah satu yang paling menyeronokkan (dan kurang praktikal, jika anda tidak peduli dengan membuang masa) cara menggunakan CSS adalah untuk membuat bentuk dan warna daripada elemen HTML biasa untuk menjadikannya kelihatan seperti benda-benda yang nyata - seperti makanan, benda, atau haiwan. Hari ini kita akan melihat beberapa coretan CSS terbaik yang boleh digunakan untuk menjadikan div yang lama membosankan menjadi ciptaan yang menyerupai haiwan hidup sebenar. Sebahagian daripada mereka bahkan animasi! Sekiranya anda suka kucing dan CSS, terus baca, ini adalah untuk anda.

  1. Pure CSS Black Cat

Screen Shot 2017-03-07 di 4.24.41 PM

Mari bermula dengan kucing hitam kerana ia adalah klasik. Kucing hitam ini dibuat semata-mata dengan CSS, dan ia termasuk animasi CSS supaya matanya dan telinga kedua-dua bergerak selaras dengan satu sama lain (telinga bergerak ke atas dan ke bawah, mata bergerak dari kiri ke kanan).

2. Dog CSS

Screen Shot 2017-03-07 di 4.28.04 PM

Jika anda bukan orang kucing, mungkin anjing ini akan merayu kepada anda. Bayang anjing CSS tulen ini merupakan perwakilan yang canggih dari kawan terbaik lelaki. Malah ia datang lengkap dengan tulang dan kerah.

3. Teddy Bear

Screen Shot 2017-03-07 di 4.32.54 PM

Coretan ini tidak membuat beruang yang realistik, beruang itu menyerupai lebih banyak beruang teddy, tetapi ia masih sangat comel dan mempunyai animasi kecil yang bagus (gelombang lengan kecil pada anda). Selain itu, beruang yang realistik kelihatan menakutkan. Coretannya adalah CSS tulen - tidak diperlukan JavaScript atau jQuery.

4. Anjing dan Bola

Screen Shot 2017-03-07 di 4.38.04 PM

Coretan CSS animasi yang hebat ini mempunyai anjing yang sangat bersemangat dan ekornya yang sangat bersemangat. Di hadapan anjing itu adalah bola yang berwarna terang, yang melantun ketika anda mengklik padanya. Coretan ini dilakukan dengan baik. Bukan sahaja kualiti animasi yang hebat, tetapi CSS secara keseluruhannya kelihatan menyenangkan dan realistik.

5. Memuatkan kucing

Screen Shot 2017-03-07 di 4.45.13 PM

Coretan kucing ini mungkin sedikit lebih berguna daripada coretan lain dalam senarai ini. Kucing animasi dalam cuplikan ini juga berfungsi sebagai kesan memuat. Kucing bergerak sekitar dalam lingkaran lawan jam yang mudah digunakan di tempat animasi pemuatan bulat lain yang mungkin digunakan dalam projek.

6. Arnab

Screen Shot 2017-03-07 di 4.47.37 PM

Kelinci comel ini dibuat semata-mata menggunakan CSS dan bahkan termasuk kesan hover animasi yang sangat sejuk (apabila anda melayang di atas kelinci, belon mula naik di latar belakang).

7. SVG Bird

Screen Shot 2017-03-07 di 4.49.50 PM

Animasi SVG adalah super berguna dan serba boleh dalam mewujudkan apa-apa bentuk dan dapat menghidupkannya. Dalam kes ini, bentuk yang dicipta adalah burung, dan animasi yang dicapai adalah sedikit mengepakkan sayap (mata juga bergerak dari kiri ke kanan).

8. CSS Fat Cat

Screen Shot 2017-03-07 di 4.54.02 PM

Satu lagi kucing untuk ukuran yang baik. Kucing CSS tulen ini, kerana anda mungkin dapat memberitahu dari tajuk, sedikit lemak. Dia juga memakai guaman kerana, mengapa tidak? Kucing itu mempunyai animasi yang sedikit - ekor itu menggerutu, tetapi berdasarkan alis marah yang serius kucing ini bersukan, ia mungkin tidak dalam cara yang bahagia.

Source

Sila tinggalkan balasan anda

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.