100+ adet Altçizgi CSS hover koleksiyonu

Web sitesinde menü ve bağlantılar için animasyon aramaktan bıktınız ise bu koleksiyon sayesinde aramayı bırakabilirsiniz. 100’den fazla farklı animasyonun bir listesini buldunuz.

Koleksiyon içerisinde basit olandan daha karmaşık olana kadar, kesinlikle beğendiğiniz bir tanesi olacaktır, istediğinizi bulacaksınız.

SVG yok, JS yok, Ek etiket yok, sözde öğe yok, anahtar kare yok … Sadece CSS! Bunların tümü arka planlar, geçiş ve yalnızca bir öğe kullanılarak yapılır. Sadece bir sınıf ekleyin ve keyfini çıkarın.

100 underline/overlay animations | The ultimate CSS collection 🥇

• The Basic
• The Continuous
• The Double
• The Two Steps
• The Unexpected
• The Rounded
• The Fading
• The Infinite
• The All Sides
• The Thick
• The Sliding
• The Fancy
• The Inverted
• The 3D

The Basic

Few notes:

• currentColor will use the color defined inside color.
• I am using CSS variables to make the code shorter. var(--d, 0) means that the default value is 0 then I change it on hover.
• The syntax 0 100% /var(--d, 0) 3px means background-position / background-size. We adjust the 3px to control the height/thickness of the line.

The Continuous

The Double

The Two Steps

The Unexpected

The Rounded

The Fading

The Infinite

Keep the hover for too long here.

The All Sides

The Thick

The Sliding

The below requires us to know the width of the element so it’s more suitable for monospace fonts where we can use the ch unit

The Fancy

^{(2) and (5) use some hardcoded values that need to be adjusted based on the element width}

The Inverted

The below doesn’t work on Firefox due to a known bug

The 3D

Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control.

Hepsi bu!

Favorilerinize eklediklerinizi Twitter’dan paylaşın ve bana bildirin. Kaynak: Temani Afif

100 tane daha: Another 100 underline/overlay animations | The extended CSS collection 🥇🥈 https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c

• The Shape
• The Double II
• The Unexpected II
• The Wavy
• The Shining
• The Shadowed
• The Transformed
• The Infinite II
• The Multicolor
• The Sliding II
• The Fancy II
• The Inverted II
• The 3D II
• The Morphing