Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

KubelQ

Animacja Loga/Hover

Promowane odpowiedzi

Witam mam problem z hoverem, ponieważ nie zabardzo wiem jak dodać efekt buzz out do loga mam CSS ale nie orientuję się jak go wstawić bo gdy wstawiłem w

#logo:hover  to nic nie dało.

 

Tutaj kod buzz out:

 

@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }


  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }


  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Musisz zadeklarować jaką animację chcesz użyć oraz czas jej trwania, za pomocą dyrektyw animation-name oraz animation-duration

#logo:hover {
  animation-name: hvr-buzz-out;
  animation-duration: 3s;
}

demo

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


  • Podobna zawartość

    • Przez Dudnes
      Stare logo katujemy.eu, używane bodajże w 2016/2017
       
      Autor: @Keno
      Pobierz: 
      Ukryta zawartość Zippyshare.com - Katujemy.eu - logo.rar Demo/Screen:
       
    • Przez Bzy-Tek
      Dz dobry
      Mam stronę główną  złożoną  z 3 horyzontalnie wyśrodkowanych obrazków tak jak w kodzie css poniżej:
      .container { width: 700px; max-width: 100%; height: 370px; background: url(srodek.jpg) center center no-repeat; background-size: 100% 100%; margin: 130px auto 57px; position: relative; text-align: center;} .container:before {content: ''; background: url(gora.jpg) top center no-repeat; background-size: 100% 100%; height: 50px; width: 700px; max-width: 100%; display: block;top: -50px; position: relative;} .container:after {content: ''; background: url(dol.jpg) top center no-repeat; background-size: 100% 100%; height: 57px; width: 700px; max-width: 100%; display: block;bottom: -57px; position: absolute;} i sprawdza się on jako rwd tło strony.
      Usiłuję w klasie .container dodać na środku logo strony a poniżej w pewnej poziomej odległości od siebie dwa obrazki będące linkami do wersji językowych. W środku między flagami ma być też napis "established since"
      I za choinkę nie mogę tego wykodzić  Może ktoś szybciej rozgryzie problem - bo siedzę już dwa dni nad tym.
×