Tạo hiệu ứng trượt bằng CSS cực đẹp cho blog

#Thủ Thuật #Windows #Blogger #Facebook

Tạo hiệu ứng trượt bằng CSS cực đẹp cho blog

Share:
Có nhiều cách để trang trí cho blog của mình, và đây cũng là 1 trong những cách trang trí cho blog đẹp nhất và đơn giản nhất. Sử dụng hoàn toàn CSS nên rất dễ thực hiện và không ảnh hưởng đến tốc độ load trang.
Các bạn có thể xem demo ngay tại bài viết này nhé.

Các bước thực hiện

Bước 1: Đăng nhập vào giao diện chỉnh sửa template của blogger
Bước 2: Dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template

Code trượt từ phải qua trái

@-webkit-keyframes transform-translate{
from{-webkit-transform:translate(1000px,0px)}
to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes transform-translate{
from{-moz-transform:translate(1000px,0px)}
to{-moz-transform:translate(0px,0px)}
}
@-ms-keyframes transform-translate{
from{-ms-transform:translate(1000px,0px)}
to{-ms-transform:translate(0px,0px)}
}
@-o-keyframes transform-translate{
from{-o-transform:translate(1000px,0px)}
to{-o-transform:translate(0px,0px)}
}
@keyframes transform-translate{
from{transform:translate(1000px,0px)}
to{transform:translate(0px,0px)}
}
#id {
-webkit-animation:transform-translate 3s;
-moz-animation:transform-translate 3s;
-ms-animation:transform-translate 3s;
-o-animation:transform-translate 3s;
animation:transform-translate 3s;
}

Code trượt từ dưới lên trên

@-webkit-keyframes transform-translate{
from{-webkit-transform:translate(0px,1000px)}
to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes transform-translate{
from{-moz-transform:translate(0px,1000px)}
to{-moz-transform:translate(0px,0px)}
}
@-ms-keyframes transform-translate{
from{-ms-transform:translate(0px,1000px)}
to{-ms-transform:translate(0px,0px)}
}
@-o-keyframes transform-translate{
from{-o-transform:translate(0px,1000px)}
to{-o-transform:translate(0px,0px)}
}
@keyframes transform-translate{
from{transform:translate(0px,1000px)}
to{transform:translate(0px,0px)}
}
#id {
-webkit-animation:transform-translate 3s;
-moz-animation:transform-translate 3s;
-ms-animation:transform-translate 3s;
-o-animation:transform-translate 3s;
animation:transform-translate 3s;
}
3s là thời gian trượt, nếu bạn muốn nhanh thì tăng lên và ngược lại!
Thay #id thành thành phần mà bạn muốn nó trượt!
Bước 3: Lưu template
Enjoy!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.