CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Ekim 2018
YouTube'ta Takip Et

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi yönünde kullandığımız zamanlar da olur bu altı çizgili linkleri. Mesela linki varsayılan olarak altı çizgisiz yapıp, kullanıcı üzerine geldiğinde altı çizgili olmasını sağlayabiliyoruz. Peki kullanıcının daha çok ilgisini çekmek istesek?

Bu makalede linklerdeki düz çizgi yerine, dalgalı ve hareketli, animasyonlu bir alt çizgi oluşturmaya çalışalım. Fare imleci, linkin üzerine geldiğinde sıradanlıktan uzak, hareketli bir alt çizgi ile karşılaşıyor.

Önce standart link kodunu, ardından stil dosyasaına CSS kodlarını yazalım.

Linkler için HTML ve CSS kodlarını yazdıktan sonra animasyonlu alt çizgiye geçebiliriz. Hareketli ve dalgalı bir alt çizgi yapmak için SVG dosyasından faydalanıyoruz. SVG’yi CSS’te background-image etiketi ile birlikte kullanıyoruz. Fare imleci linkin üzerine geldiğinde alt çizginin dalgalı olmasını ve sonsuz bir döngüyle kayıyormuş gibi görünmesini ise aşağıdaki kod ile sağlıyoruz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.