Çerçeveli Renk Değiştiren Avatar Yapımı

[Mystic0]

Avatarın etrafında renk değiştiren border vardır.

Göremeyenler:

Kod: Tümünü Seç Tümünü Kopyala

https://image.prntscr.com/image/NfOEaXUGQzCZGffxeQpADQ.png
veya
https://i.hizliresim.com/ok3nkb.png

CSS Kodu:

Kod: Tümünü Seç Tümünü Kopyala

#avatarr img {
   background: #fff;
    transition: .25s;
    border-radius: 0px;
}

#avatarr img:hover {
    transition: .25s;
    border-radius: 1000px;
}

@keyframes ani2 {
   25% {
       border: 2px solid #3498db;
}

50% {
       border: 2px solid #8e44ad;
}

75% {
       border: 2px solid #d35400;
}

100% {
       border: 2px solid #16a085;
}
}
div.animation2 img {
    border: 2px solid #f1c40f;
   animation-name: ani2;
   animation-delay: 1s;
   animation-duration: 1s;
   animation-iteration-count: 999999999999;
   animation-direction: reverse;
   animation-timing-function: linear;
}

postbit_avatar gir ve değiştir

Kod: Tümünü Seç Tümünü Kopyala

<div id="avatarr" class="animation2"><center><a href="{$post['profilelink_plain']}"><img src="{$useravatar['image']}" alt="" height="125px" width="125px" /></a></center></div>

Not: height ve width yerinden avatar boyunu ayarlaya bilirsiniz.

Demo:

Kod: Tümünü Seç Tümünü Kopyala

http://weblost.net/konu-renk-degistiren-avatar-yapimi.html

Not: En Uyumlu Default'ta Çalışır.
Not2: Kullanmadan önce kod yedeklerini alınız.

[Wenchernz]

Gayet iyi eline sağlık.

[yusufkoc]

Eline sağlık.

[#Power]

Ben yapmıştım böyle bişey gören görmüştür :dd

[Mystic0]

Ben yapmıştım böyle bişey gören görmüştür :dd

Olabilir hocam sonuçta kodlar bize ait değil :)
(ait değil derken yanlış anlamayın kodu ben yazdım kodları biz oluşturmadık anlamında :D)

[Novruz]

Geçiş sert olmuş.Transition`u biraz arttırırsan daha iyi olur.Eline Sağlık.

[La Fontaine]

Eline sağlık.

[hipolito]

Razer gibi olmuş Maaşallah :)
- Güzel olmuş hocam elinize sağlık.