Tạo hiệu ứng Slide và fadeIn cho Blogspot bằng Animation CSS
/ lúc / 67 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng trượt và mờ dần (slide & fadein) cho blogspot bằng css animation, sử dụng thuộc tính keyframes có dạng:
@keyframes tên_effect {from{CSS ban đầu}to{CSS lúc sau}}
hoặc
@keyframes tên_effect {0%{CSS ban đầu}100%{CSS lúc sau}}
Từ cấu trúc đó mình đã viết thêm tí CSS để 'trang trí' cho Blog bằng hiệu ứng trượt và mờ dần khi tải trang.
Tạo hiệu ứng Slide và fadeIn cho Blogspot bằng Animation CSS
Demo xem ngay tại trang chủ https://www.bacsiwindows.com

Cách thực hiện

Thêm toàn bộ CSS này vào trước thẻ ]]></b:skin> trong mẫu
body {animation: fadeIn 2s;-webkit-animation:fadeIn 2s;-moz-animation:fadeIn 2s}
@keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-webkit-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-moz-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-o-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
Bạn có thể tùy chỉnh lại CSS bằng cấu trúc mình đưa ở đầu bài nhé. Nếu không thì để nguyên vậy mà dùng.
Chúc bạn thành công.

BÌNH LUẬN VỀ BÀI VIẾT (67)

avatar
Trần Thanh Bình

TRẢ LỜI
avatar
Trường Nguyễn

Đạo

TRẢ LỜI
avatar
Nguyễn Lương Duy

Cái gì đây a

TRẢ LỜI
avatar
Trường Nguyễn

Hiệu ứng bằng CSS đó em, F5 lại trang đi là thấy.

TRẢ LỜI
avatar
Phú Cường Blogger

Ông thích mã màu gì? Qua blog cmt gửi t nhé để đổi background logo liên kết, mới gỡ hết logo bằng image hqua xong cho đỡ nhiều ảnh.

TRẢ LỜI
avatar
Trường Nguyễn

#7577a9 nha, mà thay chữ B bằng chữ W dùm t nha ^^

TRẢ LỜI
avatar
Star Nguyễn IT

Chất :V

TRẢ LỜI
avatar
Star Cường IT ­

Thanks nhé :v đang cần :3

TRẢ LỜI
avatar
Sói Xám TV

Hay lắm anh, ký tên: Star Sơn IT

TRẢ LỜI
avatar
Trường Nguyễn

Chất thật :3

TRẢ LỜI
avatar
Sói Xám TV

Mà cái này gọi là đậm dần nghe đúng hơn đó anh

TRẢ LỜI
avatar
Trường Nguyễn

Oki ngon :3

TRẢ LỜI
avatar
Trường Nguyễn

Sao Star Sơn lại là Sói Xám TV?

TRẢ LỜI
avatar
Star Sơn IT

Đây em đây, tại đang dùng mail khác

TRẢ LỜI
avatar
Trường Nguyễn

:v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Em tưởng a thích #68999c chứ

TRẢ LỜI
avatar
Trường Nguyễn

Ừm lúc trước là màu đó, mà thấy đậm quá nên đổi thành #7577A9 rồi!

TRẢ LỜI
avatar
Star Đức Blog

Hay lắm anh, đang cần :3

TRẢ LỜI
avatar
Trường Nguyễn

Oki em :3

TRẢ LỜI
avatar
Star Đức Blog

Hóng share nút backtop :3 :v =))

TRẢ LỜI
avatar
Trường Nguyễn

Ok cũng định viết :D

TRẢ LỜI
avatar
Star Đức Blog

Đẹp phết anh ạ, template này bao nhiêu ? giá cả hợp lí em xúc về nhà =)) :v

TRẢ LỜI
avatar
Trường Nguyễn

Only 100k thôi em :3

TRẢ LỜI
avatar
Star Đức Blog

ráng đợi em tầm mấy ngày nữa em xúc nó về :3 =))

TRẢ LỜI
avatar
Star Đức Blog

anh cho em xin cái hiệu ứng hover trên bài viết đi ạ. cái trượt ở trên với dưới đấy ạ
đây ạ: https://i.imgur.com/qFJW05F.png
mail: nguyenchanhduc3107@gmail.com

TRẢ LỜI
avatar
Trường Nguyễn

Ok khi nào xúc thì inbox cho anh:
https://admin.bacsiwindows.com

TRẢ LỜI
avatar
Trường Nguyễn

Đã gửi cho em nhé.

TRẢ LỜI
avatar
Star Đức Blog

Dạ thanks anh <3 =))

TRẢ LỜI
avatar
Trường Nguyễn

:D

TRẢ LỜI
avatar
Star Đức Blog

Cho em slot liên kết với ạ =)) <3
Link: https://chanhducblogger.blogspot.com/
Tên: Star Đức Blog
Đã đặt cho anh <3 =))

TRẢ LỜI
avatar
Trường Nguyễn

Đây không phải chỗ đặt liên kết nhé
https://www.bacsiwindows.com/hop-tac

TRẢ LỜI
avatar
Star Cường IT ­

Ẩn cái dịch vụ thiết kế web ... với bacsiwindows_rc_v5 đi :v trên điện thoại lỗi responsive

TRẢ LỜI
avatar
Trường Nguyễn

Dichmia mới làm xong chưa kịp responsive :3

TRẢ LỜI
avatar
Star Cường IT ­

Tui là tui kết ông lắm á :v ngồi f5 nãy giờ hóng res để bơ về mà lâu quá hà.

TRẢ LỜI
avatar
Trường Nguyễn

Ừ hóng típ đi nhé :3 giờ t đi ngủ xíu đã, mệt quá :v

TRẢ LỜI
avatar
Game Mobi

Huyrocket đến thăm blog đây. <3
Bài viết hơn cả tuyệt vời đấy a Trường :)

TRẢ LỜI
avatar
Trường Nguyễn

Hello!! Cảm ơn Huy Rocket 1h nhé ;)

TRẢ LỜI
avatar
Game Mobi

Kg sao nghe quen rồi :) lên lớp máy đứa bạn cũng nói z có đứa còn nói 24h cơ :)

TRẢ LỜI
avatar
Trường Nguyễn

:v tên nghe hay mà, có gì đâu!!

TRẢ LỜI
avatar
Game Mobi

Sài rồi mới thấy hay chứ gì @@

TRẢ LỜI
avatar
Trường Nguyễn

Éc, nói tên Huy Rocket 1h hay mà @@

TRẢ LỜI
avatar
Quốc Hiếu

Cmt thứ 1000

TRẢ LỜI
avatar
Quốc Hiếu

10000 ???

TRẢ LỜI
avatar
Trường Nguyễn

10000 đâu ra :v

TRẢ LỜI
avatar
Quốc Hiếu

Dưới footer kìa ???

TRẢ LỜI
avatar
Trường Nguyễn

Để 9999 cho đẹp thoai, chưa được 5000 cmt nữa :3

TRẢ LỜI
avatar
Star Cường IT ­

Tội VL, ảo tưởng sức mạnh :v

TRẢ LỜI
avatar
Trường Nguyễn

Tự thủ râm tinh thần ý mà :v vậy cũng 'lừa' được vài người :v

TRẢ LỜI
avatar
Tính Getter

Anh Trường xạo, đã 5387 comment rồi đó :v Tưởng em không biết hả :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v :v

TRẢ LỜI
avatar
Trường Nguyễn

Đâu dữ vậy, không tới 5N đâu :v

TRẢ LỜI
avatar
Tính Getter

Klq mà đang phiêu Turn Down For What hay vcl :v

TRẢ LỜI
avatar
Trường Nguyễn

Bầu trời is blue, con c* is black, lông láck is brown...
Hỡi Thánh Phật trên cao /=hup TURN DOWN FOR WHAT :v

TRẢ LỜI
avatar
Tính Getter

Chuyển qua Zomboy - Outbreak :v

TRẢ LỜI
avatar
Star Cường IT ­

5k comment là của đó ta cường nha tính gét tơ :v

TRẢ LỜI
avatar
Trường Nguyễn

Đang quẩy EDM mình ên à :v

TRẢ LỜI
avatar
Trường Nguyễn

BSW mà không bán đi - lập lại thì chắn chắc hơn 5 - 6N :3

TRẢ LỜI
avatar
Tính Getter

E hổng hiểu gì luôn :v

TRẢ LỜI
avatar
Trường Nguyễn

Ý nói là 5k bình luận là của blog Star Cường IT...

TRẢ LỜI
avatar
Ngọc Tính IT

Bá quá

TRẢ LỜI
avatar
Trường Nguyễn

Đơn giản nhưng bá nhở :3

TRẢ LỜI
avatar
Game Mobi

Kinh thật

TRẢ LỜI
avatar
Trường Nguyễn

Có gì mà kinh vậy ?

TRẢ LỜI
avatar
Star Đức Blog

Anh Trường ơi em xúc theme hiện tại :v =))

TRẢ LỜI
avatar
Trường Nguyễn

Nhắn tin anh
admin.bacsiwindows.com

TRẢ LỜI
avatar
Star Đức Blog

Rep đi anh, Nguyễn Chánh Đức á =)) ==

TRẢ LỜI
avatar
Star Cường IT ­

Nhận xét này đã bị tác giả xóa.

TRẢ LỜI
avatar
Trần Thanh Bình

Cmt blog toàn những thằng trẻ trâu đú, chỉ đc vài người :)

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

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 (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.