[Code] Avatar xoay vòng khi rê chuột vào + khung avatar đẹp[✔]

[congdong_9x4r]

Demo : 
http://4rcongdong9x.123.st/t16-topic
Cách làm :
ACP >>Display >>Templates >>QLTT >> viwetopic_body :

Tìm code sau :

Code:

{postrow.displayed.POSTER_AVATAR}

Thay lại thành :

Code:

<span class="avatarxt">{postrow.displayed.POSTER_AVATAR}</span>

Và thay luôn :

Code:

{postrow.displayed.POSTER_AVATAR}

Bằng code sau :

Code:

<!-- BEGIN-----AVATA --><table cellSpacing="0" cellPadding="0" border="0" style="width:auto">
<td style="padding: 0px"><img src=" http://i74.servimg.com/u/f74/16/18/15/10/th_110.png "></td>
<td style="padding: 0px" background=" http://i74.servimg.com/u/f74/16/18/15/10/th_210.png "></td>
<td style="padding: 0px"><img src=" http://i74.servimg.com/u/f74/16/18/15/10/th_310.png "></td>
</tr>
<tr>
<td valign="top" style="padding: 0px" background=" http://i74.servimg.com/u/f74/16/18/15/10/th_410.png ">
<td style="padding: 0px; background-color: #ffffff" bgColor="#ffffff">
{postrow.displayed.POSTER_AVATAR}
</td>
<td style="padding: 0px" background=" http://i74.servimg.com/u/f74/16/18/15/10/th_510.png "></td>
</tr>
<tr>
<td style="padding: 0px"><img src=" http://i74.servimg.com/u/f74/16/18/15/10/th_610.png "></td>
<td style="padding: 0px" background=" http://i74.servimg.com/u/f74/16/18/15/10/th_710.png "></td>
<td style="padding: 0px"><img src=" http://i74.servimg.com/u/f74/16/18/15/10/th_810.png "></td>
</table>
<!-- ENDE-----AVATA -->

Thêm vào CSS :

Code:

.avatarxt img {
transition: all 15s ease; -webkit-transition: all 15s ease; -moz-transition: all 15s ease;
transition-delay: 5s; -webkit-transition-delay: 5s; -moz-transition-delay: 5s;
background-color: #FFFFFF;
max-width:143px;
border-radius:5px;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);
}.avatarxt img:hover {
transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease;
transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg);
position:relative;
}

Xong , thấy hay thanks nha !
Nguồn : 4r Cộng Dồng 9x
Đã chỉnh sửa !

[anhoang_qn]

dài dòng vÃi thế - chỉ cần 1 đoạn css3 là đủ mà @@

[tuanvip123]

cho hỏi làm sao để chèn cái nền trong mục bài viết ak ..làm thế nào chỉ với

[Chúa Tể Địa Ngục]

code sai kìa!

[congdong_9x4r]

Code đã sửa lại ...

[Chúa Tể Địa Ngục]

dài dòng vÃi thế - chỉ cần 1 đoạn css3 là đủ mà @@

là code nào ạ?

[BTV2]

Code:

.avatarxt img {
transition: all 15s ease; -webkit-transition: all 15s ease; -moz-transition: all 15s ease;
transition-delay: 5s; -webkit-transition-delay: 5s; -moz-transition-delay: 5s;
background-color: #FFFFFF;
max-width:143px;
border-radius:5px;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);
}.avatarxt img:hover {
transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease;
transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg);
position:relative;
}

thay avatarxt thành class cái avatar

[Khổng Thiên]

Hay lắm cảm ơn bạn nhé.

[Trúc Sơn]

Thank bạn nha

[Sponsored content]