Navigare rapidă

Ultimele subiecte
» Un nou stil pentru categorii [BB3]
Scris de Meliss Sam 18 Noi - 12:34
» Summer v1.1 theme
Scris de eby Sam 18 Noi - 11:28
» Wireless ipb theme [punBB]
Scris de YutuLe Lun 6 Noi - 20:37
» Prezentare CHR
Scris de Zeus Vin 20 Oct - 22:13
Cuvinte-cheie

edit  

Miscare logo din partea stanga in partea dreapta


Pentru cei care nu stiu prea bine css, am extras din tema lui [Trebuie sa fiti inscris si conectat pentru a vedea acest link] de pe Hitskin acest efect dragut de miscare al bannerului.

Phpbb3 & Invision:
Cod:
#logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}
PunBB:
Cod:
#pun-logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#pun-logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#pun-logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}
Phpbb2:
Cod:
#i_logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#i_logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#i_logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}

Comentariile utilizatorilor
Membru activ
avatar
la data de Mier 19 Oct - 16:59
iAngel Membru activ
Conectat
Minunat efectul,merge perfect!Multumesc Sankez!
Membru ET
avatar
la data de Sam 5 Noi - 15:45
roBiino =p~ Membru ET
Conectat
Bun codul, l-am folosit cel pentru phpBB3. Mulțumesc!
Membru nou
avatar
la data de Vin 23 Mar - 10:26
Alexandru Miron Membru nou
Conectat
e mult prea lung
asta e mai simplu si mai scurt

Cod:
#logo {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
#logo:hover {
margin-left: 100px;
}
0.5s - reprezinta viteza de deplasare, poate fi si 1s sau sub o secunda ms, ex: 0.1s
margin-left: 100px; - reprezinta distanta de la stanga la dreapta, deplasarea.

Cat desptre info, fii serios, e un cod, nu poti avea drepturi de autor asupra lui, e ca si cum ai da in judecata pe cei de la css3maker sau alte site-uri de animatii css3, ca doar de acolo le-ai luat.