Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

Uyumlu XF 2 Sürümleri
  1. 2.2.X
  2. 2.0.X
  3. 2.1.X
Merhaba arkadaşlar, kayıt ol buttonuna ufak bir border animasyonu ekleyelim. Siz renkleri ile animasyon hızı ile vs oynayabilirsiniz. ;)

Kullandığımız temanın PAGE_CONTAINER şablonunu açalım ve aşağıdaki kodu bulalım.

HTML:
<a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
                                data-xf-click="overlay" data-follow-redirects="on">

Hemen altına aşağıdaki html kodlarını ekleyelim.

HTML:
<span></span>
<span></span>
<span></span>
<span></span>

Kullandığımız temanın extra.less şablonunu açalım ve aşağıdaki kodları ekleyelim.


Less:
@keyframes registerAnim1 {
    0% {
        left: -100%;
    }
    50%,100% {
        left: 100%;
    }
}
@keyframes registerAnim2 {
    0% {
        top: -100%;
    }
    50%,100% {
        top: 100%;
    }
}
@keyframes registerAnim3 {
    0% {
        right: -100%;
    }
    50%,100% {
        right: 100%;
    }
}
@keyframes registerAnim4 {
    0% {
        bottom: -100%;
    }
    50%,100% {
        bottom: 100%;
    }
}
.p-navgroup-link--register {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 30px;
    text-decoration: none;
    overflow: hidden;
    transition: .5s;
    span {
        position: absolute;
        display: block;
        &:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: registerAnim1 1s linear infinite;
        }
        &:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: registerAnim2 1s linear infinite;
            animation-delay: .25s;
        }
        &:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: registerAnim3 1s linear infinite;
            animation-delay: .5s;
        }
        &:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: registerAnim4 1s linear infinite;
            animation-delay: .75s;
        }
    }
}

Sonuç

kayitButton.gif
Yazar
netr0n
Görüntüleme
3,162
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 2 değerlendirme

netr0n ait diğer kaynakar

Son incelemeler

Ooo yine ateş eden bir özellik:) Tank you♥️
Dikkat çeken güzel bir animasyon olmuş. Ellerine sağlık kardeşim :)

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.