Cara Menciptakan Css Animasi Hover Keren
Cara Membuat CSS Animasi Hover Keren - Ada banyak cara untuk mempercantik tampilan Blog atau website. Beberapa diantaranya ialah kombinasi warna, layout, fitur, imbas animasi dan masih banyak lagi. Nah, kali ini admin akan memperlihatkan tutorial bagaimana cara menciptakan css animasi pada konten blog atau website semoga terlihat lebih cantik, dalam hal ini khususnya untuk efek Hover yang kalau kita mengarahkan kursor ke link, icon atau konten lainnya, maka akan memperlihatkan imbas hover yang bagus bukan hanya pergantian warna saja.
Tapi sebelum itu, untuk mempercantik tampilan, admin memakai pelengkap Css Fontawesome. Ini hanya sebatas pilihan. Jika kau ingin memakai animasi pada teks, tidak usah memakai fontawesome.
Lalu, langkah pentingnya ialah menambah atribut animation rubberBand yang sebelumnya dibuat. Tambahkan pada Class atau Id. Contoh :
Selesai.
Cara Membuat CSS Animasi Hover Keren
Trik yang admin pakai ialah memakai atribut animation yang sudah diatur melalui keyframe. Jadi, admin bermaksud memperlihatkan imbas goyang memantul pada icon yang tersorot oleh kursor.
Berikut ini ialah pengaturan keyframe nya :
/* Animation */ @keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}Tapi sebelum itu, untuk mempercantik tampilan, admin memakai pelengkap Css Fontawesome. Ini hanya sebatas pilihan. Jika kau ingin memakai animasi pada teks, tidak usah memakai fontawesome.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>Lalu, langkah pentingnya ialah menambah atribut animation rubberBand yang sebelumnya dibuat. Tambahkan pada Class atau Id. Contoh :
.icon a:hover {animation:rubberBand 1s;}Selesai.
