Süper Hareketli Dönen Avatar - MyBB

[#Captain]

Admin KP - Şablon & Stil - Kullandığınız Tema - Global.css giriyoruz, aşağıdaki kodları en altına ekliyoruz..

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

.imgholder{
     position:relative;
     width:120px;
     height:120px;
     border-radius:100px;
     float:left;
     margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
     position:absolute;
     left:0;
     top:0;
     width:120px;
     height:120px;
     z-index:5;
     border-radius:100px;
     -moz-border-radius:100px;
     -webkit-border-radius:100px;
     opacity:0.3;
     filter: alpha(opacity = 30);
     box-shadow:0 0 5px #000;
     -moz-box-shadow:0 0 5px #000;
     -webkit-box-shadow:0 0 5px #000;
    
     transform: scale(0.5,0.5);
     -ms-transform: scale(0.5,0.5);
     -moz-transform: scale(0.5,0.5);
     -webkit-transform: scale(0.5,0.5);
    
     transition:
         opacity 1s,
         transform 1s ease-in-out 0.3s;
     -moz-transition:
         opacity 1s,
         -moz-transform 1s ease-in-out 0.3s;
     -webkit-transition:
         opacity 1s,
         -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
     opacity:1;
     filter: alpha(opacity = 100);
     transform: scale(1,1);
     -ms-transform: scale(1,1);
     -moz-transform: scale(1,1);
     -webkit-transform: scale(1,1);
}

.imgholder figcaption{
     position:absolute;
     left:-5px;
     top:40%;
     width:130px;
     color:#004E87;
     font-weight:bold;
     text-shadow:-1px -1px 0 #fff;
     z-index:4;
    
     transition:
         top 0.5s ease-out;
     -moz-transition:
         top 0.5s ease-out;
     -webkit-transition:
         top 0.5s ease-out;
}
.imgholder:hover figcaption{
     top:120%;
}
/* decorations style */
.imgholder .circle{
     position:absolute;
     border-radius:100px;
     -moz-border-radius:100px;
     -webkit-border-radius:100px;
}
.imgholder .outer1{
     top:-8px;
     left:-8px;
     width:120px;
     height:120px;
     z-index:2;
    
     border:8px solid;
     border-color:#DEEBFC;
     box-shadow:0 0 3px #AFD3FF;
     -moz-ox-shadow:0 0 3px #AFD3FF;
     -webkit-box-shadow:0 0 3px #AFD3FF;
    
     background: #ffffff;
     background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
     background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
    
     transform:rotate(90deg);
     -ms-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
    
     transition:
         transform 1.8s ease-in-out,
         box-shadow 1s ease-out,
         border-color 1.5s;
     -moz-transition:
         -moz-transform 1.8s ease-in-out,
         -moz-box-shadow 1s ease-out,
         border-color 1.5s;
     -webkit-transition:
         -webkit-transform 1.8s ease-in-out,
         -webkit-box-shadow 1s ease-out,
         border-color 1.5s;
}
.imgholder:hover .outer1{
     border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
     box-shadow:0 0 10px #0285E2;
     -moz-box-shadow:0 0 10px #0285E2;
     -webkit-box-shadow:0 0 10px #0285E2;
     transform:rotate(-10deg);
     -ms-transform:rotate(-10deg);
     -moz-transform:rotate(-10deg);
     -webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
     top:-18px;
     left:-18px;
     width:136px;
     height:136px;
     z-index:1;
    
     border:10px solid;
     border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
     box-shadow:0 0 20px #8EB9FF;
     -moz-box-shadow:0 0 20px #8EB9FF;
     -webkit-box-shadow:0 0 20px #8EB9FF;
     opacity:0;
     filter: alpha(opacity = 0);
    
     transform: scale(1.3,1.3) rotate(180deg);
     -ms-transform: scale(1.3,1.3) rotate(180deg);
     -moz-transform: scale(1.3,1.3) rotate(180deg);
     -webkit-transform: scale(1.3,1.3) rotate(180deg);
        
     transition:
         opacity 0.5s,
         transform 0.7s ease-out;
     -moz-transition:
         opacity 0.5s,
         -moz-transform 0.7s ease-out;
     -webkit-transition:
         opacity 0.5s,
         -webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
     opacity:0.9;
     filter: alpha(opacity = 90);
     transform: scale(1,1) rotate(-10deg);
     -ms-transform: scale(1,1) rotate(-10deg);
     -moz-transform: scale(1,1) rotate(-10deg);
     -webkit-transform: scale(1,1) rotate(-10deg);
}

Admin KP - Şablon & Stil - Şablonlar - Kullandığınız Tema - Postbit Şablonları - Postbit_avatar şablonuna giriyoruz içindeki herşeyi silip aşağıdaki kodu ekliyoruz..

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

<div align="center" class="imgholder">
         <div class="outer1 circle"/></div>
         <div class="outer2 circle"/></div>
         <figure>
<div class="postuseravatar1" href="{$post['profilelink_plain']}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<center>
<img src="{$post['avatar']}" alt="{$post['avatar']}" title="{$post['avatar']}"/>
</center>
</div>
<figcaption class="caption">
             <span class="username">
              <div class="username_container">
            
             </span>
     </figcaption>        
         </figure>
     </div>

Yapımcı -> DieseL