CSS3 Hover Olayı İle Görsele Efekt Verme

CSS3 Hover, CSS3 ile beraber gelen en büyük gelişmelerden biri de gelişmiş animasyonlar oluşturabiliyor olmaktır diye düşünüyorum. Bu makalemizde görsel üzerine gelindiğinde ne tür efektler uygulayabileceğimiz konusunda bol örnekli anlatımlar yapılacaktır.

CSS3’de Görsele hover olayı ile Efekt Verme

CSS Hover Effects

Aşağıdaki efektlerimize ait sonuçları görmek için görsel üzerine imleci götürmeniz yeterlidir efekt’e ait kodlar için ise HTML ve CSS sekmelerini kullanınız.

animate.css adlı css kütüphanesi ile sahip olacağınız 100’e yakın animasyon için cursor.muratoner.net/animatecss.html adresini ziyaret edebilirsiniz.

Efekt 1 – Büyütme

Efekt 2 – Küçültme

Efekt 3 – Başlık Gösterme

Efekt 4 – Rotasyon Değişimi

Efekt 5 – Ovallik Değişimi

Efekt 6 – Resim Değişimi

Efekt 7 – Ovallik Değişimi 2

Animate.css ile kolay animasyon uygulama yöntemi

animate.css adlı css kütüphanesi ile sahip olacağınız 100’e yakın animasyon için cursor.muratoner.net/animatecss.html adresini ziyaret edebilirsiniz. CSS3 dünyasında animasyon olarak çok fazla örnek kod farklı kaynaklarda yer almaktadır ama ben en basit anlamda animasyon konusuna yeni girenler için seçtiklerime makale içerisinde yer vermeye çalıştım.

Animate.css tarafında kullanılabilecek efektler

Attention seekers
  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat
Back entrances
  • backInDown
  • backInLeft
  • backInRight
  • backInUp
Back exits
  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp
Bouncing entrances
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
Bouncing exits
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
Fading entrances
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight
Fading exits
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomRight
  • fadeOutBottomLeft
Flippers
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
Lightspeed
  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft
Rotating entrances
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
Rotating exits
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
Specials
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
Zooming entrances
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
Zooming exits
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
Sliding entrances
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
Sliding exits
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

📚 İlgilenebileceğiniz Diğer Makaleler


✍ Lütfen CSS3 Hover ile alakalı olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından CSS3 Hover adlı makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.