Hosting zapewnia KYLOS

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[pytanie] Logo
#1
Chciałem się dowiedzieć jak zrobiliście te logo, że ono tak lata xD
Chyba wiedzie o co chodzi.Smile

i avatar ..xD
#2
To na 100% jest animacja w css, ale o dokładny kod musisz pytać glovera.
[Obrazek: 53822247]
 !Sprzedanych murzynów! Glover
#3
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-radius5px;
-
o-transition-propertywidth,height,-o-transform,background,opacity;
-
o-transition-duration1s,1s,1s,1s,1s;
-
moz-transition-propertywidth,height,-o-transform,background,opacity;
-
moz-transition-duration1s,1s,1s,1s,1s;
transition-propertywidth,height,transform,background,opacity;
transition-duration1s,1s,1s,1s,1s;
opacity0.4;
}

.
animated_avatar:hover
{
-
moz-transformrotate(360deg);
-
webkit-transformrotate(360deg);
-
o-transformrotate(360deg);
transformrotate(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
#4
Thx wielkie ;>
#5
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;
backgroundurl(images/conquer_logo3.pngleft 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%        {transformrotate(0deg);left:0px;}
25%        {transformrotate(20deg);left:0px;}
50%        {transformrotate(0deg);left:500px;}
55%        {transformrotate(0deg);left:500px;}
70%        {transformrotate(0deg);left:500px;}
100%    {transformrotate(-360deg);left:0px;}
}

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

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

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


#6
panowie a sama przezroczystość bez obracania
#7
Wystarczy usunąć z zaznaczonego kodu:
Kod PHP:
-moz-transformrotate(360deg);
-
webkit-transformrotate(360deg);
-
o-transformrotate(360deg);
transformrotate(360deg); 
#8
Przezroczystość, to zwykły obrazek w png. Tło mozesz usunąc w gimpie lub łatwiej w photoshopie.
[Obrazek: 53822247]
#9
Tak Veritas, ale koledze chodziło o efekt przeźroczystości wraz z płynnym rozjaśnieniem co daje funkcja transition zawarta w CSS3.
#10
Kod PHP:
<div id="animated_logo">
</
div

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


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

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości