Skocz do zawartości
Forum komputerowe

Kolorowe rangi i animowane ikony CSS


Rekomendowane odpowiedzi

Chyba bardziej mu chodzi o poświatę 😄 i te migające tło.

<span style='background: url(tlowgifie); color: #kolor; text-shadow: 0px 1px 9px #kolor;'>Nazwa grupy</span>

 

Edytowane przez Krasnal
Odnośnik do odpowiedzi
Udostępnij na innych stronach

jak chcesz support jakiś i pomoc przy forum to pisz pv, chętnie pomogę żeby odświeżyć sobie pamięć, bo już chyba z 6 lat mineło od mojego ostatniego projektu 🤣

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator
Napisano (edytowane)

Są to odpowiednio zanimowane klasy ikon. Możesz skorzystać z gotowej paczki animacji:

https://animate.style/

Musiałbyś tylko podpiąć gdzieś ten styl CSS: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

lub go zalinkować gdzieś w motywie pomiędzy <head>[...]</head> dodając tam:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Potem ze strony wybierasz sobie nazwę animacji i dodajesz do klasy tej ikony.

 

Ewentualnie musisz samemu zrobić animacje korzystając z narzędzia: https://keyframes.app/ szukając na necie gotowców lub poczekać/poprosić kogoś o zrobienie specjalnie dla ciebie 😉

Edytowane przez Mativve
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Założyciel

Animacja " wrench" w CSS 

 @keyframes wrench {
     0% {
         -webkit-transform: rotate(-12deg);
         transform: rotate(-12deg)
     }
     8% {
         -webkit-transform: rotate(12deg);
         transform: rotate(12deg)
     }
     10% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     18% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     20% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     28% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     30% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     38% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     40% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     48% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     50% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     58% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     60% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     68% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     100%,
     75% {
         -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 }

 .faa-parent.animated-hover:hover>.faa-wrench,
 .faa-wrench.animated,
 .faa-wrench.animated-hover:hover {
     -webkit-animation: wrench 2.5s ease infinite;
     animation: wrench 2.5s ease infinite;
     transform-origin-x: 90%;
     transform-origin-y: 35%;
     transform-origin-z: initial
 }

HTML

<span style="color: #d369dc;font-weight:bold;text-shadow: 0px 1px 9px #d369dc;"><i class="fa fa-gavel faa-wrench animated" aria-hidden="true"></i> Ranga</span>

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...