xenforo logo efekt

mause ile logonun üzerine gelince dönen bir efekt verir

aşağıdaki kodları temanızın extra.less şablonuna ekleyin
CSS:
.p-nav-smallLogo {
    img {
        -webkit-transition-duration: .8s;
        -moz-transition-duration: .8s;
        -o-transition-duration: .8s;
        transition-duration: .8s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        overflow: hidden;
        &:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }
    }
}
 
daire şeklinde bir logonuz var ve logonun sürekli dönmesini istiyorsanız extra.less şablonuna aşağıdaki kodları ekleyin

CSS:
.p-nav-smallLogo {
    img {
        animation-name: spin;
        animation-duration: 5000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}
@keyframes spin {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
 
Üst Alt