v2.5.2
Giriş yap

CSS Hover Efekti

redline
353 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 3

Merhaba PT.

Burada bulunan sitede, soldaki menüdeki hover efektini (üzerine gelince sallanan) almaya çalışıyorum. Bir türlü sadeleştirip efekti alamadım.

Kendim yapmaya çalıştım, bu kadar yumuşak olmadı.

Sitedekinin aynısını alıp buraya ekleyecek bir hayır sever var mıdır? :)

css html javascript jquery
Cevap yaz
Cevaplar (3)
mubado
711 gün önce

<code>

 .icon{
    animation: .5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both ob;
    backface-visibility: hidden;
    transform-origin: top right;
}

</code>

<code>

@keyframes ob { 0%, 100% {

transform: rotate(0);

}
15% {

transform: rotate(5deg);

}
30% {

transform: rotate(-5deg);

}
45% {

transform: rotate(4deg);

}
60% {

transform: rotate(-4deg);

}
75% {

transform: rotate(2deg);

}
85% {

transform: rotate(-2deg);

}
92% {

transform: rotate(1deg);

}
}
</code>

1
#009900
redline
711 gün önce

@mubado Teşekkür ederim hocam, bir kaç düzenlemeyle yaptım, aynı yumuşaklığı yakaladım. :)

@ebykdrms Mantık anlatımı için teşekkür ederim, mantığını biliyordum fakat aynı yumuşaklığı yakalayamıyordum. Sitedekinin birebirini kopyalayıp yapıştırma niyetinde değilim tabi ki, sadece animasyonun kodlarını görüp seviyelerini tespit etmekti niyetim. :)

0
#009901
ebykdrms
711 gün önce

Merhaba. Bahsettiğiniz olay bir CSS animation olayı. Sitedekinin aynısını alıp buraya eklemek hoş olmaz.
Diyelim ki şöyle bir yapınız var:

<nav>
    <a><i class="icon">ikon</i> Link 1</a>
    <a><i class="icon">ikon</i> Link 2</a>
    <a><i class="icon">ikon</i> Link 3</a>
    <a><i class="icon">ikon</i> Link 4</a>
</nav>

Stil olarak şu yapıyı kullanabilirsiniz:

nav.menu a {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
}
nav.menu a:hover .icon {
    animation: .5s cubic-bezier(0.35, 0.10, 0.20, 0.95) both salla;
    transform-origin: top right;
}
@keyframes salla {
    0%,to { transform: rotate(0) }
    15% { transform: rotate(8deg) }
    30% { transform: rotate(-8deg) }
    45% { transform: rotate(6deg) }
    56% { transform: rotate(-6deg) }
    70% { transform: rotate(3deg) }
    85% { transform: rotate(-3deg) }
    95% { transform: rotate(2deg) }
}

Sitede aşağı yukarı buna benzer bir işlem yapılmış.

1
#009898