discussion XenForo Forum kategori bloklarına animasyon ekleme

[HAN]

XenForo Forum kategori bloklarına animasyon ekleme​

Uyumlu XF Sürümleri

1. 2.3.X

Belirlediğiniz forum kategori bloklarına animasyon ekleyerek özelleştirin.

Description:
Belirlediğiniz forum kategori bloklarına animasyonlar ekleyerek özelleştirin.
Aşağıdaki kodu, kullandığınız temanın extra.less şablonuna ekleyin.

************* Forum kategori animasyon ekle TRXF.TR *************/
.block.block--category.block--category1:hover {
    animation:shakeGavel 1.20s;
}
@keyframes shakeGavel{0{
-webkit-transform:translate(0, 0) rotate(0);
-ms-transform:translate(0, 0) rotate(0);
-webkit-transform: translate(0, 0) rotate(0);
 -ms-transform: translate(0, 0) rotate(0);
 -webkit-transform: translate(0, 0) rotate(0);
  -ms-transform: translate(0, 0) rotate(0);
  transform:translate(0, 0) rotate(0)}20%{
  -webkit-transform:translate(-3px, 0) rotate(-25deg);
  -ms-transform:translate(-3px, 0) rotate(-25deg);
  -webkit-transform: translate(-3px, 0) rotate(-25deg);
   -ms-transform: translate(-3px, 0) rotate(-25deg);
   -webkit-transform: translate(-3px, 0) rotate(-25deg);
    -ms-transform: translate(-3px, 0) rotate(-25deg);
    transform:translate(-3px, 0) rotate(-25deg)}30%{
    -webkit-transform:translate(3px, 0) rotate(25deg);
    -ms-transform:translate(3px, 0) rotate(25deg);
    -webkit-transform: translate(3px, 0) rotate(25deg);
     -ms-transform: translate(3px, 0) rotate(25deg);
     -webkit-transform: translate(3px, 0) rotate(25deg);
      -ms-transform: translate(3px, 0) rotate(25deg);
      transform:translate(3px, 0) rotate(25deg)}50%{
      -webkit-transform:translate(-3px, 0) rotate(-15deg);
      -ms-transform:translate(-3px, 0) rotate(-15deg);
      -webkit-transform: translate(-3px, 0) rotate(-15deg);
       -ms-transform: translate(-3px, 0) rotate(-15deg);
       -webkit-transform: translate(-3px, 0) rotate(-15deg);
        -ms-transform: translate(-3px, 0) rotate(-15deg);
        transform:translate(-3px, 0) rotate(-15deg)}60%{
        -webkit-transform:translate(3px, 0) rotate(15deg);
        -ms-transform:translate(3px, 0) rotate(15deg);
        -webkit-transform: translate(3px, 0) rotate(15deg);
         -ms-transform: translate(3px, 0) rotate(15deg);
         -webkit-transform: translate(3px, 0) rotate(15deg);
          -ms-transform: translate(3px, 0) rotate(15deg);
          transform:translate(3px, 0) rotate(15deg)}100%{
          -webkit-transform:translate(0, 0) rotate(0);
          -ms-transform:translate(0, 0) rotate(0);
          -webkit-transform: translate(0, 0) rotate(0);
           -ms-transform: translate(0, 0) rotate(0);
           -webkit-transform: translate(0, 0) rotate(0);
            -ms-transform: translate(0, 0) rotate(0);
            transform:translate(0, 0) rotate(0)}
}
/*************///////////////*************/

Altta bulunan category.block--category1 yerine animasyon ekleyeceğiniz forum kategori id'nizi yazın.