v2.5.2
Giriş yap

CSS Hover Efekti

redline
426 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
930 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
930 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
930 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