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 viperovsky
      Autor: ViperDesigner
      Tematyka: Szablon moderacyjny
      Screen/Demo: Dropbox - szabon_moderacyjny.zip

       
      Kod CSS:
      /* Problem został rozwiązany */ .webMessage_success { color: #8c8f98; background: #ffffff; border-left: 3px solid #7cd348; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage_success:hover { color: #7cd348; margin-left: -15px; } .webMessage_success:before { content: "\f00c"; font-family: 'FontAwesome'; margin-right: 3px; } /* Temat został zamknięty */ .webMessage_closed { color: #8c8f98; background: #ffffff; border-left: 3px solid #fb6565; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage_closed:hover { color: #fb6565; margin-left: -15px; } .webMessage_closed:before { content: "\f023"; font-family: 'FontAwesome'; margin-right: 3px; } /* Temat został przeniesiony */ .webMessage_move { color: #8c8f98; background: #ffffff; border-left: 3px solid #e0db26; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage_move:hover { color: #e0db26; background: #ffffff; margin-left: -15px; } .webMessage_move:before { content: "\f100"; font-family: 'FontAwesome'; margin-right: 3px; } /* Twoje podanie zostało przyjęte */ .webMessage_accepted { color: #8c8f98; background: #ffffff; border-left: 3px solid #7cd348; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage_accepted:hover { color: #7cd348; margin-left: -15px; } .webMessage_accepted:before { content: "\f234"; font-family: 'FontAwesome'; margin-right: 3px; } /* Twoje podanie zostało odrzucone */ .webMessage_rejected { color: #8c8f98; background: #ffffff; border-left: 3px solid #fb6565; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage_rejected:hover { color: #fb6565; margin-left: -15px; } .webMessage_rejected:before { content: "\f235"; font-family: 'FontAwesome'; margin-right: 3px; } /* Domyślne ustawienia */ .webMessage { color: #8c8f98; background: #ffffff; border-left: 3px solid #6795ff; padding: 27px; box-shadow: 0px 0px 17px #8888882b; border-radius: 4px; transition: all 0.5s ease-in-out; } .webMessage:hover { color: #6795ff; margin-left: -15px; } .webMessage:before { content: "\f00c"; font-family: 'FontAwesome'; margin-right: 3px; }  
    • Przez EXXYT.
      Autor: @EXXYT.  Plik PSD Logo z motywem Sieć Serwerów Counter Strike ! .

      Ukryta zawartość
      Aby zobaczyć ukrytą zawartość musisz przyznać reputację temu postowi.  
×