Ingat kartun yang kami tonton sewaktu kecil? Pada waktu itu mereka adalah personifikasi animasi. Sekarang animasi bukan hanya kartun, kami bertemu hampir setiap hari, memeriksa telepon atau menggunakan perangkat apa pun yang memiliki layar.
Hari ini, animasi digunakan tidak hanya untuk menarik perhatian, tetapi juga untuk meningkatkan interaksi pengguna, memfasilitasi navigasi. Dalam desain yang bagus, animasi ditambahkan sedemikian rupa sehingga digabungkan dengan konsep keseluruhan, sehingga menciptakan antarmuka pengguna yang nyaman.
Pada artikel ini, kita akan membuat animasi wajah yang sederhana dengan ekspresi yang berbeda, dan dalam prosesnya kita akan belajar sedikit tentang CSS.
Mari kita mulai
Kami akan menggunakan teknik CSS, yang jarang digunakan oleh pengembang web, tetapi sering menggunakan perancang. Ini disebut masking.
Apa yang terlintas dalam pikiran ketika Anda mendengar kata "topeng"? Anda mungkin membayangkan sesuatu yang mengaburkan esensi. Hanya itu yang perlu kita ketahui.
Tunggu - tetapi artikelnya adalah tentang menulis dan menggunakan animasi CSS ... Jangan panik! Baiklah!
Buat topeng dasar
Misalkan kita memiliki tag
div dengan
background: green; dan terlihat seperti ini:
Ada juga file
face.svg :
Jika kita menerapkan properti
mask-image: url (face.svg); CSS
mask-image: url (face.svg); ke tag
div , maka Anda akan kagum melihat hasilnya:
Anda mungkin berpikir ini aneh. Gambar face.svg ditempatkan di atas
div , tetapi mengambil warna latar belakang. Ini bertentangan dengan harapan kami. Ini terjadi karena properti
mask-type , yang membuat bagian buram dari svg transparan. Dengan demikian, warna latar belakang menjadi terlihat.
Jangan sampai terlalu dalam. Hanya perlu diingat bahwa Anda dapat menggunakan
background-color untuk mengubah warna topeng. Jika Anda terbiasa dengan berbagai penggunaan
background-color , Anda juga dapat menerapkan gradien dan menulis gradien sederhana yang mengisi bagian tengah dengan warna merah dan hitam yang menyebar secara radial di sekeliling tepinya. Kode akan terlihat seperti ini:
background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));
Hasilnya akan seperti ini:
Menambahkan Animasi
Sekarang tambahkan animasi ke wajah kosong ini. Untuk melakukan ini, gunakan
expression.svg , yang Anda lihat pada gambar di bawah ini. Untuk mempermudah, saya membuat semua file svg dengan lebar dan tinggi yang sama, jadi saya tidak perlu menyelaraskan wajah dan ekspresi secara manual.
Sekarang
mask-image memiliki opsi keren yang memungkinkan Anda menggunakan banyak gambar sebagai topeng. Oleh karena itu, kita dapat melakukan ini:
mask-image: url (face.svg), url (expression.svg); . Inilah yang terjadi:
Salah satu properti paling penting dari topeng CSS adalah
mask-position , karena topeng yang terletak di sudut kiri atas relatif terhadap elemen induk. Dan saya dapat mengatur beberapa topeng menggunakan properti
mask-position mask-image seperti
mask-image . Untuk membuat wajah sedih, gunakan sesuatu seperti ini:
mask-position: 0 0, 0 12px; . Inilah yang terjadi.
Posisi pertama adalah
0 0 untuk
face.svg , dan
face.svg kedua untuk
expression.svg . Ini menyebabkan transfer 12px dan memberikan ekspresi yang diperlukan pada wajah.
Menerapkan Fungsi
Sekarang mari kita hidupkan ekspresi ini di kursor. Kode lengkap yang kita dapatkan setelah menerapkan kelas hse pseudo akan seperti ini:
i { background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1)); mask-image: url('face.svg'), url('expression.svg'); mask-position: 0 0, 0 12px; transition: mask-position .5s ease-out; } i:hover { background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1)); mask-position: 0 0, 0 0; transition: mask-position .1s linear; }
Setelah bermain sedikit lebih banyak dengan properti CSS, kita dapat melakukan ini:
Ini adalah salah satu metode yang dapat Anda gunakan untuk membuat animasi yang sangat menarik yang kami temui hampir setiap hari.
Satu poin penting
Masking mungkin tidak berfungsi di semua browser. Untuk membuatnya bekerja di semua browser, cukup tambahkan tag browser khusus seperti
-webkit- ,
-moz- dan
-0- .
Anda dapat melihat kode lengkapnya di
github dan
codepen . Terima kasih Semoga bermanfaat.
Lihatlah VPS.today , situs untuk mencari server virtual. 1500 tarif dari 130 host, antarmuka yang nyaman dan sejumlah besar kriteria untuk menemukan server virtual terbaik.