Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

You are not connected. Please login or register

[Codes] Hiệu ứng avatar nghiêng, xoay

Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

๖ۣۜTom

๖ۣۜTom
Admintrator
Admintrator

Demo:
Vào topic này và rê chuột vào avatar:
[You must be registered and logged in to see this link.]
ban đầu avatar nó nghiêng,
rê chuột vô là nó xoay vòng vòng rùi nằm vị trí ngay ngắn
sau đó trở về trạng thái nghiêng như ban đầu.

hướng dẫn:
1. thêm vào CSS:
Code:
.avatar97 img{
opacity: 0.3;filter: alpha(opacity=30);
border-radius:5px;
background-color: #FFFFFF;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
}
.avatar97 img:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);
transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5);
position:relative;
}

2. Tìm trong viewtopic_body:
Code:
{postrow.displayed.POSTER_AVATAR}
Thay bằng:
Code:
<span class="avatar97">{postrow.displayed.POSTER_AVATAR}</span>

có thể chỉnh kích thước avatar
- cứ muốn avatar kiểu chi thì cho avatar kiểu nớ. hehe
thay trong css lẫn viewtopic_body
như thay chữ avatar97 bằng avatarX
X là tham số chi chi cũng được

- có thể giới hạn kích thước avatar nữa
tránh tình trạng ảnh avatar to quá
thêm max-width và max-height
ví dụ, trong codes CSS trên cho max-width:110px

css:

Code:
.avatar97 img{
 max-width:110px;
opacity: 0.3;filter: alpha(opacity=30);
border-radius:5px;
background-color: #FFFFFF;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
}
.avatar97 img:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);
transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5);
position:relative;
}

http://www.vn-answer.tk
Share this post on: reddit

No Comment.

Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết