Zaloguj się

Mychus · (Ten post był ostatnio modyfikowany: 14-09-2012, 12:16 przez Mychus.)

Chciałem się dowiedzieć jak zrobiliście te logo, że ono tak lata

Chyba wiedzie o co chodzi. Smile

i avatar ..

Veritas · 14-09-2012, 14:35

To na 100% jest animacja w css, ale o dokładny kod musisz pytać glovera.

Glover · 14-09-2012, 16:39

Wszystko zostało oparte wg poradnika CSS3 http://www.w3schools.com/css3/css3_animations.asp

Dla przykładu rotacji z efektem przenikania:

Kod PHP:

.animated_avatar {
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s;
-webkit-border-radius: 5px;
-o-transition-property: width,height,-o-transform,background,opacity;
-o-transition-duration: 1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,opacity;
-moz-transition-duration: 1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,opacity;
transition-duration: 1s,1s,1s,1s,1s;
opacity: 0.4;
}

.animated_avatar:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
} 

Następnie otwierasz szablon Opis posta -> postbit_avatar i zastępujesz cały kod poniższym:

Kod PHP:

<div class="animated_avatar">
<a href="{$post['profilelink_plain']}"><img src="{$post['avatar']}" alt="" {$avatar_width_height} /></a>
</div> 

Mychus · 14-09-2012, 16:53

Thx wielkie ;>

Glover · (Ten post był ostatnio modyfikowany: 06-09-2014, 01:48 przez Glover.)

A o to kod na obracające się logo:

HTML:

Kod PHP:

<div id="animated_logo">
</div> 

CSS:

Kod PHP:

#animated_logo
{
width:303px;
height:143px;
background: url(images/conquer_logo3.png) left no-repeat;color:#ffffff;
position:relative;
animation:animated_logo 10s 1;
-moz-animation:animated_logo 10s 1;
-webkit-animation:animated_logo 10s 1;
-o-animation:animated_logo 10s 1;
}

@keyframes animated_logo
{
0%        {transform: rotate(0deg);left:0px;}
25%        {transform: rotate(20deg);left:0px;}
50%        {transform: rotate(0deg);left:500px;}
55%        {transform: rotate(0deg);left:500px;}
70%        {transform: rotate(0deg);left:500px;}
100%    {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_logo
{
0%        {-webkit-transform: rotate(0deg);left:0px;}
25%        {-webkit-transform: rotate(20deg);left:0px;}
50%        {-webkit-transform: rotate(0deg);left:500px;}
55%        {-webkit-transform: rotate(0deg);left:500px;}
70%        {-webkit-transform: rotate(0deg);left:500px;}
100%    {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_logo
{
0%   {-moz-transform: rotate(0deg);left:0px;}
25%  {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_logo
{
0%   {transform: rotate(0deg);left:0px;}
25%  {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;}
100% {transform: rotate(-360deg);left:0px;}
} 

Pabloo · 02-11-2012, 15:22

panowie a sama przezroczystość bez obracania

Glover · 02-11-2012, 16:42

Wystarczy usunąć z zaznaczonego kodu:

Kod PHP:

-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); 

Veritas · 02-11-2012, 20:46

Przezroczystość, to zwykły obrazek w png. Tło mozesz usunąc w gimpie lub łatwiej w photoshopie.

Glover · 03-11-2012, 08:07

Tak Veritas, ale koledze chodziło o efekt przeźroczystości wraz z płynnym rozjaśnieniem co daje funkcja transition zawarta w CSS3.

lolmol100 · (Ten post był ostatnio modyfikowany: 30-09-2013, 18:10 przez lolmol100.)

Kod PHP:

<div id="animated_logo">
</div> 

Edytowałem diva z headeru, i mi nie wyświetliło Big Grin

Zaloguj się
Login/Adres e-mail:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie

Podobne wątki
Wątek:		Autor	Odpowiedzi:	Wyświetleń:	Ostatni post
	Logo	I3LEND	3	1,132	15-11-2012, 19:17 Ostatni post: Glover