Navigare rapidă

Ultimele subiecte
» Prezentare Cristian
Scris de cristiankiss Mar 20 Iun - 8:12
» Prezentare Petronel YT
Scris de Cătălin. Vin 16 Iun - 1:45
» [punbb] eteral-game v2
Scris de Petronel™ Joi 8 Iun - 18:20
» Tema InvizionVirus
Scris de Petronel™ Joi 8 Iun - 18:19
» [punbb] xretrogradatii theme 2016
Scris de Petronel™ Joi 8 Iun - 18:17
Cuvinte-cheie

profil  edit  banner  phpBB2  navigare  tutorial  menu  animate  reclama  cautare  avatar  punbb  drop  meniu  chenar  Metin2  subiecte  radio  tema  subforumuri  Statistici  Bara  legenda  Mesaje  ultimele  html  

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.