Smf Logonuzu hareketlendirin Css3

Başlatan snrj, 20 May 2014 16:32

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

snrj

Anlatım default temaya göredir diğer temalarda farklılık gösterebilir
tek değiştirmeniz gereken yer burasıdır verdiğim 7 animasyondada

indexx.css de bul
Kod [Seç]

img#smflogo
{
    margin-left: 1em;
}


Animasyon 1 bununla değiştir
Kod [Seç]
img#smflogo
{
-webkit-animation: cssAnimation 0.597s 11 ease;
-moz-animation: cssAnimation 0.597s 11 ease;
-o-animation: cssAnimation 0.597s 11 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(0deg) scale(0.813) skew(23deg) translate(18px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(0deg) scale(0.813) skew(23deg) translate(18px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(0deg) scale(0.813) skew(23deg) translate(18px); }
}


Animasyon 2 bununla değiştir
Kod [Seç]
img#smflogo
{
   margin-left: 1em;
   animation:myfirst 10s;
    -webkit-animation:myfirst 10s;
}
@keyframes myfirst
{
from {background:blue;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:blue;}
to {background:yellow;}
}


Animasyon 3 bununla değiştir
Kod [Seç]
img#smflogo
{
   margin-left: 1em;
   position:relative;
   animation:myfirst 10s;
    -webkit-animation:myfirst 10s;
}
@keyframes myfirst
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:10px;}
75%  {background:yellow; left:0px; top:10px;}
100% {background:blue; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:10px;}
75%  {background:yellow; left:0px; top:10px;}
100% {background:blue; left:0px; top:0px;}
}


Animasyon 4 bununla değiştir
Kod [Seç]
img#smflogo
{
   animation-name: pulse;
   -webkit-animation-name: pulse;   

   animation-duration: 1.5s;   
   -webkit-animation-duration: 1.5s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
   0% {
      transform: scale(0.9);
      opacity: 0.7;     
   }
   50% {
      ransform: scale(1);
      opacity: 1;   
   }   
   100% {
      transform: scale(0.9);
      opacity: 0.7;   
   }         
}

@-webkit-keyframes pulse {
   0% {
      -webkit-transform: scale(0.95);
      opacity: 0.7;     
   }
   50% {
      -webkit-transform: scale(1);
      opacity: 1;   
   }   
   100% {
      -webkit-transform: scale(0.95);
      opacity: 0.7;   
   }         
}


Animasyon 5 bununla değiştir
Kod [Seç]
img#smflogo
{
animation-name: bounce;
   -webkit-animation-name: bounce;   

   animation-duration: 1.6s;   
   -webkit-animation-duration: 1.6s;

   animation-timing-function: ease;   
   -webkit-animation-timing-function: ease;   
   
   transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -webkit-transform-origin: 50% 100%;   
}
@keyframes bounce {
   0% {
      transform: translateY(0%) scaleY(0.6);
   }
   60%{
      transform: translateY(-100%) scaleY(1.1);
   }
   70%{
      transform: translateY(0%) scaleY(0.95) scaleX(1.05);
   }
   80%{
      transform: translateY(0%) scaleY(1.05) scaleX(1);
   }   
   90%{
      transform: translateY(0%) scaleY(0.95) scaleX(1);
   }           
   100%{
      transform: translateY(0%) scaleY(1) scaleX(1);
   }   
}

@-webkit-keyframes bounce {
   0% {
      -webkit-transform: translateY(0%) scaleY(0.6);
   }
   60%{
      -webkit-transform: translateY(-100%) scaleY(1.1);
   }
   70%{
      -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
   }
   80%{
      -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
   }   
   90%{
      -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
   }           
   100%{
      -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
   }     
}


Animasyon 6 bununla değiştir
Kod [Seç]
  img#smflogo
{
animation-name: fadeIn;
   -webkit-animation-name: fadeIn;   

   animation-duration: 1.5s;   
   -webkit-animation-duration: 1.5s;

   animation-timing-function: ease-in-out;   
   -webkit-animation-timing-function: ease-in-out;     

   visibility: visible !important;   
}
@keyframes fadeIn {
   0% {
      transform: scale(0);
      opacity: 0.0;     
   }
   60% {
      transform: scale(1.1);   
   }
   80% {
      transform: scale(0.9);
      opacity: 1;   
   }   
   100% {
      transform: scale(1);
      opacity: 1;   
   }     
}

@-webkit-keyframes fadeIn {
   0% {
      -webkit-transform: scale(0);
      opacity: 0.0;     
   }
   60% {
      -webkit-transform: scale(1.1);
   }
   80% {
      -webkit-transform: scale(0.9);
      opacity: 1;   
   }   
   100% {
      -webkit-transform: scale(1);
      opacity: 1;   
   }     
}


Animasyon 7 bununla değiştir
Kod [Seç]
  @keyframes slideDown {
   0% {
      transform: translateY(-100%);
   }
   50%{
      transform: translateY(8%);
   }
   65%{
      transform: translateY(-4%);
   }
   80%{
      transform: translateY(4%);
   }
   95%{
      transform: translateY(-2%);
   }         
   100% {
      transform: translateY(0%);
   }     
}

@-webkit-keyframes slideDown {
   0% {
      -webkit-transform: translateY(-100%);
   }
   50%{
      -webkit-transform: translateY(8%);
   }
   65%{
      -webkit-transform: translateY(-4%);
   }
   80%{
      -webkit-transform: translateY(4%);
   }
   95%{
      -webkit-transform: translateY(-2%);
   }         
   100% {
      -webkit-transform: translateY(0%);
   }   
}


img#smflogo
{
animation-name: slideDown;
   -webkit-animation-name: slideDown;   

   animation-duration: 1s;   
   -webkit-animation-duration: 1s;

   animation-timing-function: ease;   
   -webkit-animation-timing-function: ease;   

   visibility: visible !important;   
  }


Kesinlikle  Alıntı Değildir İsteyen istediği sitede istediği gibii paylaşabilir :D kaynak gösterirsede seviniriz :D
not: ben kendi oynak logomu yapacam diyen arkadaşlar buraya tıklayın