Hover
2.3.1
Kumpulan efek hover bertenaga CSS3 untuk diterapkan pada tautan, tombol, logo, SVG, gambar unggulan, dan sebagainya. Terapkan dengan mudah ke elemen Anda sendiri, modifikasi, atau gunakan saja untuk inspirasi. Tersedia dalam CSS, Sass, dan KURANG.
Demo | tutorial
npm install hover.css --savebower install hover --saveHover.css dapat digunakan dalam beberapa cara; salin dan tempel efek yang ingin Anda gunakan di stylesheet Anda sendiri atau rujuk stylesheet tersebut. Kemudian tambahkan saja nama kelas efek ke elemen yang ingin Anda terapkan.
Jika Anda berencana hanya menggunakan satu atau beberapa efek, praktik yang lebih baik adalah menyalin dan menempelkan efek ke dalam stylesheet Anda sendiri, sehingga pengguna tidak perlu mengunduh css/hover.css secara keseluruhan.
Dengan asumsi Anda ingin menggunakan efek Grow:
Unduh Hover.css
Di css/hover.css , temukan Grow CSS (setiap efek diberi nama menggunakan komentar di atasnya):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}Salin efek ini lalu tempelkan ke stylesheet Anda sendiri.
Dalam file HTML yang Anda inginkan efeknya muncul, tambahkan kelas .hvr-grow ke elemen pilihan Anda.
Contoh elemen sebelum menerapkan efek Hover.css:
< a href =" # " > Add to Basket a >Contoh elemen setelah menerapkan efek Hover.css:
< a href =" # " class =" hvr-grow " > Add to Basket a > Catatan : Pada 2.0.0 semua nama kelas Hover.css diawali dengan hvr- untuk mencegah konflik dengan perpustakaan/stylesheet lain. Jika menggunakan Sass/LESS, ini dapat dengan mudah diubah menggunakan variabel $nameSpace / @nameSpace di scss/_options.scss atau less/_options.less .
Jika Anda berencana menggunakan banyak efek Hover.css, Anda mungkin ingin mereferensikan keseluruhan stylesheet Hover.css.
hover-min.csshover-min.css ke file situs web Anda, misalnya di direktori bernama csshover-min.css di < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >Alternatifnya, Anda dapat menambahkan referensi ke dalam stylesheet yang sudah ada seperti ini (ini mungkin berguna bagi pengguna WordPress yang tidak dapat mengedit HTML):
@import url ( "hover-min.css" );.hvr-grow ke elemen pilihan Anda.Contoh elemen sebelum menerapkan efek Hover.css:
< a href =" # " class =" button " > Add to Basket a >Contoh elemen setelah menerapkan efek Hover.css:
< a href =" # " class =" button hvr-grow " > Add to Basket a >display PropertiUntuk membuat elemen "dapat diubah", Hover.css memberikan yang berikut ini ke semua elemen yang menerapkannya:
display : inline-block;
vertical-align : middle; Jika Anda ingin mengganti perilaku ini, hapus CSS di atas dari Hover.css atau ubah properti display untuk elemen tersebut. Pastikan untuk mendeklarasikan override setelah deklarasi Hover.css sehingga kaskade CSS akan diterapkan. Alternatifnya, jika Anda menggunakan Hover.css versi Sass/LESS, Anda dapat menghapus/mengomentari mixin forceBlockLevel() yang ditemukan di scss/_hacks.scss atau less/_hacks.less .
Untuk informasi lebih lanjut tentang elemen Transformable, lihat Modul Transformasi CSS.
Untuk menambahkan ikon Hover.css, tempatkan ikon HTML di dalam elemen yang menerapkan efek Hover.css. Misalnya:
Pada kode di atas, kami telah memberikan elemen tautan kelas hvr-icon-forward yang akan membuat ikon bergerak maju ketika tautan diarahkan. Ikonnya sendiri diberi kelas hvr-icon agar Hover.css tahu bahwa ini adalah ikon yang ingin kita animasikan. Dalam contoh ini, ikon kita berasal dari FontAwesome, yang telah kita muat ke dalam laman web kita sesuai instruksi FontAwesome, seperti:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Catatan: Mulai Hover.css v2.3.0 Anda dapat menggunakan metode apa pun yang Anda suka untuk menambahkan ikon (sebelumnya, hanya FontAwesome yang langsung didukung.) Misalnya, Anda dapat menggunakan pustaka ikon lain atau sebagai gantinya, gunakan gambar seperti ini:
Di sini, gambar akan bertindak sebagai ikon karena kelas hvr-icon diterapkan padanya, dan ketika diarahkan, ikon akan berputar seperti yang ditentukan oleh kelas hvr-icon-spin pada elemen induk.
Posisi ikon sepenuhnya berada dalam kendali Anda. Anda dapat menempatkannya sebelum teks, seperti:
Atau gunakan CSS khusus untuk memposisikan ikon sesuai keinginan Anda.
Proyek ini terdiri dari folder dan file berikut:
File catatan lainnya meliputi:
Banyak efek Hover.css bergantung pada fitur CSS3 seperti transisi, animasi, transformasi, dan elemen semu, oleh karena itu, efek mungkin tidak sepenuhnya berfungsi di browser lama.
Selain browser yang disebutkan di atas, Hover.css didukung di semua browser utama. Silakan lihat caniuse.com untuk dukungan penuh bagi banyak teknologi web dan uji halaman web Anda sesuai dengan itu. Disarankan untuk menerapkan efek fallback untuk browser lama, menggunakan CSS yang didukung oleh browser tersebut atau pustaka pengujian fitur seperti Modernizr.
Grunt tidak penting tetapi dapat mempercepat pengembangan. Dengan Grunt terinstal, jalankan grunt dari baris perintah untuk menyiapkan server pengembangan yang diakses di http://127.0.0.1:8000/ atau IP lokal Anda untuk pengujian jaringan. Dengan menjalankan Grunt, Sass atau LESS akan diproses terlebih dahulu (tergantung apakah Anda bekerja di folder scss atau less ) dan file CSS akan diperkecil.
Catatan: Awalnya Grunt disiapkan untuk mengawali properti CSS secara otomatis, namun agar proyek dapat diakses semaksimal mungkin, hal ini tidak lagi berlaku. Campuran prefixed(property, value) Sass/LESS harus digunakan untuk awalan browser. Lihat Menggunakan Sass/LESS untuk Pengembangan dan [Menggunakan LESS untuk Pengembangan].
Sass/LESS tidak penting tetapi dapat mempercepat pengembangan. Praproses Sass/LESS dengan perangkat lunak favorit Anda atau lingkungan yang disediakan melalui Grunt.
Sass/LESS digunakan dalam proyek Hover.css untuk memisahkan berbagai CSS ke dalam file tertentu. Setiap efek berada dalam filenya sendiri di direktori effects . Hover.css juga menggunakan file .scss dan .less berikut:
Berisi peretasan (baris kode yang tidak diinginkan tetapi biasanya diperlukan) yang diterapkan pada efek tertentu. Peretasan dijelaskan di sini.
Berisi mixin prefixed dan keyframes yang menerapkan prefiks yang diperlukan yang Anda tentukan di _options.scss / _options.less ke properti dan keyframe.
Properti dapat diawali seperti ini:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); Mixin prefixed meneruskan properti yang ingin Anda awali, diikuti dengan nilainya.
Bingkai utama dapat diawali seperti ini:
@include keyframes(my-animation) {
to {
color : red;
}
} Mixin keyframes diteruskan dengan nama keyframe, diikuti dengan konten menggunakan direktif @content.
. keyframes ( my-animation , {
to {
color : red;
}
}); Mixin keyframes meneruskan nama keyframe, diikuti dengan konten, keduanya sebagai argumen.
Berisi opsi default, berbagai opsi efek, dan awalan browser yang ingin Anda gunakan dengan prefixed mixin. Secara default, hanya awalan -webkit- yang disetel ke true (karena sebagian besar browser sekarang tidak memerlukan awalan).
Pada 2.0.0 , _options juga menyertakan opsi $nameSpace / @nameSpace yang memungkinkan Anda mengubah nama yang diawali dengan semua kelas. Ruang nama defaultnya adalah hvr .
Opsi $includeClasses / @includeClasses secara default disetel ke true dan akan menghasilkan semua efek Hover.css dengan nama kelasnya sendiri, misalnya hvr-grow . Jika Anda ingin menambahkan properti yang membentuk efek Hover.css ke nama kelas Anda sendiri, setel opsi ini ke false .
Jika Anda ingin menyumbangkan efek Anda sendiri, silakan lihat Panduan Berkontribusi.
Hover.css tersedia di bawah lisensi pribadi/sumber terbuka gratis atau lisensi komersial berbayar tergantung pada kebutuhan Anda. Untuk membandingkan lisensi, silakan kunjungi Ian Lunn Design Limited Store dan beli lisensi komersial di sini.
Untuk penggunaan pribadi/sumber terbuka, Hover.css tersedia di bawah lisensi MIT
Baca lisensi penuh
Untuk penggunaan komersial, Hover.css tersedia di bawah lisensi Komersial, Komersial Diperluas, dan Komersial OEM.
Beli | Baca lisensi penuh
*Dengan pengecualian aplikasi yang memungkinkan pengguna akhir membuat aplikasi terpisah. Lihat Lisensi Komersial OEM.
Beli | Baca lisensi penuh
Jika aplikasi Anda memungkinkan pengguna akhir untuk menghasilkan aplikasi terpisah yang menggabungkan perangkat lunak Ian Lunn Design Limited, misalnya, perangkat pengembangan, pustaka, atau pembuat aplikasi, Anda harus mendapatkan Lisensi Komersial OEM. Silakan hubungi kami untuk informasi lebih lanjut tentang Lisensi Komersial OEM.
Hover.css sebelumnya tersedia di bawah Lisensi MIT untuk penggunaan komersial dan non-komersial. Siapa pun yang memperoleh lisensi MIT untuk penggunaan komersial sebelum v2.2.0 (24 Maret 2017) dapat terus menggunakan versi Hover.css sebelum v2.2.0 di bawah lisensi yang sama.
Jika Anda ingin meningkatkan ke v2.2.0 atau lebih tinggi, atau hanya ingin menunjukkan dukungan Anda untuk Hover.css (kami sangat menghargainya!), silakan beli lisensi komersial terkini. Beli Lisensi Komersial.
Ian Lunn adalah Pengembang Front-end Freelance dan penulis CSS3 Foundations.
Pekerjakan Ian untuk situs web responsif, situs WordPress, JavaScript, animasi, dan pengoptimalan.
