CSS Hareketli Altigen Baglantilar
CSS Hareketli Altıgen Bağlantılar
CSS ile animasyon kullanarak bazı harika efektler ekleyebilirsiniz. Bu blogda, linklerin altını çizme özelliğini nasıl canlandıracağınızı göstereceğiz, linkin sağdan sola doğru alt çizgi hareketleri olacak, bu da sadece bir özelliği değiştirerek soldan sağa gitmek için kolayca değiştirilebilir.
Benim üzerimde gezdir
Bu animasyonu elde etmek için, ilk olarak, özellik metin dekorasyonunu kullanarak alt çizgiyi kaldırmalı ve onuhiçbir şekilde ayarlamamalıyız, aynı zamanda konum özelliğini göreceli olarak ayarlamamız gerekecektir . Aşağıdaki örnekte gösterildiği gibi linklerin rengini de ayarlayabilirsiniz.
a { text-decoration: none; position: relative; color: #3366FF; }
Artık bağlantının alt çizgilerine sahip olmadığından, şimdi aşağıdaki css kodunu sahte öğeyi kullanarak uygulayabiliriz : İstenilen animasyona ulaşmak için. Burada alt çizgi animasyonumuzu görüntülemek için geçiş özelliğini kullandığımızı görebilirsiniz . Değiştirerek sol için mülk hakkı , animasyon soldan sağa doğru hareket edecektir. Alt çizgi etkisi, rengi, kenar kalınlığını ve kenarlık stilini ayarlayabileceğiniz kenarlık tabanlı özellik kullanılarak gerçekleştirilir .
a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid #3366FF; transition: 0.4s; |\
Kullanıcının bir bağlantı üzerinde gezinmesi için kodun son bölümü gerekir, genişlik özelliği % 100 olarak ayarlanır . Bu ayar, kenarlığı % 100 olarak değiştirecek ve animasyon efektine ulaşmaya yardımcı olacak, kullanıcı imleci bağlantıdan kaldırdığında, özellik yukarıdaki bölümde olduğu gibi % 0'a geri dönecek ve alt çizgi kaybolur.
a:hover:after { width: 100%; }
