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.
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%); }
}
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)