discussion XenForo Forum mesaj ve bildirim simgelerine animasyon ekle

[Nevzat]

XenForo Forum mesaj ve bildirim simgelerine animasyon ekle​

Uyumlu XF Sürümleri

1. 2.2.X
2. 2.3.X

Forum mesaj ve bildirim simgelerine animasyon ekleyerek özelleştirin.

Aşağıdaki kodu aktif olarak kullandığınız temanızın extra.less şablonuna ekleyin:

@keyframes xgtbell {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--alerts.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtbell 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes xgtDM {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--conversations.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtDM 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

GÖRÜNÜM