Jump to content
Sign in to follow this  
Innocent

Jak zrobić ruchome logo IPS 4.1?

Recommended Posts

Przeglądaj:
Personalizacja --> Style --> Twój styl --> Kliknij na </>,  następnie kliknij CSS i w pasku wyszukiwania, wyszukaj custom.css

Wklej tam następujący kod:

.buzz{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz:hover,.buzz:focus,.buzz:active{
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:0.15s;
animation-duration:0.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}

@-webkit-keyframes 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 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)
}

}

.buzz-out{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz-out:hover,.buzz-out:focus,.buzz-out:active{
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.75s;
animation-duration:0.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}

Teraz przejdź do:
Personalizacja --> Style --> Twój styl --> Kliknij na </>, następnie kliknij Szablony i w pasku wyszukiwania, wyszukaj logo
Zmień:

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>

Na:

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}' class="brand buzz-out" ></a>

Został tylko dodany kod:

class="brand buzz-out"

Dość nietypowy i łatwy sposób, ale działa.


Zobacz pełny artykuł

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

W celu świadczenie usług przez nasz Serwis na najwyższym poziomie, w ramach Serwisu wykorzystujemy pliki Cookies (tzw. ciasteczka). Korzystając ze stron Serwisu IPSBEYOND.PL bez zmiany ustawień przeglądarki będą one zapisane w pamięci urządzenia. Jeżeli nie dokonacie Państwo zmiany ustawień przeglądarki internetowej to wyrażacie zgodę na zapisywanie plików Cookies.