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.

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,404
İlk yayınlama
Son güncelleme

Puanlar

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 :)

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz

Zevkini yansıtan rengi seç

Geniş / Dar görünüm

Temanızı geniş yada dar olarak kullanmak için kullanabileceğiniz bir yapıyı kontrolünü sağlayabilirsiniz.

Izgara görünümlü forum listesi

Forum listesindeki düzeni ızgara yada sıradan listeleme tarzındaki yapının kontrolünü sağlayabilirsiniz.

Resimli ızgara modu

Izgara forum listesinde resimleri açıp/kapatabileceğiniz yapının kontrolünü sağlayabilirsiniz.

Kenar çubuğunu kapat

Kenar çubuğunu kapatarak forumdaki kalabalık görünümde kurtulabilirsiniz.

Sabit kenar çubuğu

Kenar çubuğunu sabitleyerek daha kullanışlı ve erişiminizi kolaylaştırabilirsiniz.

Köşe kıvrımlarını kapat

Blokların köşelerinde bulunan kıvrımları kapatıp/açarak zevkinize göre kullanabilirsiniz.

Geri