Webboard

Pełna wersja: Efekt na logu
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Witam 
Chciałbym zrobić gdy podczas najechania kursorem na logo logo przybliżało się i lekko potrzasało się 
wiem że efekt taki da się osiągnąć\

Domena CS-420.PL
Jeśli chodzi o sam sposób wykonania - jest to odpowiednia animacja wywoływana przez :hover, są już gotowe biblioteki z takimi animacjami np. ta https://elrumordelaluz.github.io/csshake/
Na stronie znajdziesz instrukcję jak użyć tej biblioteki.
(05.06.2018, 18:05)Divir napisał(a): [ -> ]http://jsfiddle.net/5q7gx3sb/1/
Co to?

gdzie to wkleic
CSS wklejasz do global.css (w trybie zaawansowanym), tylko musisz zmienić nazwę klasy page-logo na tą, którą ma logo na Twojej stronie, bo inaczej działać to nie będzie ;)
niby jest ale coś się psuje i za barddzo do dołu schodzi
demo na CS-420.PL
Dzieje się tak ponieważ w klasie logo masz już ustawioną właściwość transform która jest nadpisywana przez animację, także najprościej będzie chyba w ten sposób
Kod:
@keyframes pageLogo {
 from { transform: scale(1) rotate(4deg) translateY(-50%); }
 25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
 50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
 75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
 to { transform: scale(1) rotate(0) translateY(-50%); }
}
U mnie dalej to samo
Bo dalej masz w logo.css to:
Kod:
.logo {}.logo: hover {
    animation: Logo.5 s ease - in -out
}
@keyframes Logo {
    from {
        transform: scale(1) rotate(4 deg)
    }
    25 % {
        transform: scale(1.05) rotate(-4 deg)
    }
    50 % {
        transform: scale(1.1) rotate(4 deg)
    }
    75 % {
        transform: scale(1.15) rotate(-4 deg)
    }
    to {
        transform: scale(1) rotate(0)
    }
}
Zamiast tego:

Kod:
.logo{}.logo:hover{animation:Logo .5s ease-in-out}
@keyframes Logo {
from { transform: scale(1) rotate(4deg) translateY(-50%); }
25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
to { transform: scale(1) rotate(0) translateY(-50%); }
}
zrobiłem to i nadal to samo
Nie, już jest dobrze. Wyczyść sobie cache to zobaczysz (wciskasz Ctrl + F5) ;)