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.

67 nhận xét:

Trần Thanh Bình nói...

Trường Nguyễn nói...

Đạo

Nguyễn Lương Duy nói...

Cái gì đây a

Trường Nguyễn nói...

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

Phú Cường Blogger nói...

Ô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ường Nguyễn nói...

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

Star Nguyễn IT nói...

Chất :V

Star Cường IT ­ nói...

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

Sói Xám TV nói...

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

Trường Nguyễn nói...

Chất thật :3

Sói Xám TV nói...

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

Trường Nguyễn nói...

Oki ngon :3

Trường Nguyễn nói...

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

Star Sơn IT nói...

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

Trường Nguyễn nói...

:v

Nguyễn Lương Duy nói...

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

Trường Nguyễn nói...

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

Star Đức Blog nói...

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

Trường Nguyễn nói...

Oki em :3

Star Đức Blog nói...

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

Trường Nguyễn nói...

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

Star Đức Blog nói...

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

Trường Nguyễn nói...

Only 100k thôi em :3

Star Đức Blog nói...

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

Star Đức Blog nói...

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ường Nguyễn nói...

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

Trường Nguyễn nói...

Đã gửi cho em nhé.

Star Đức Blog nói...

Dạ thanks anh <3 =))

Trường Nguyễn nói...

:D

Star Đức Blog nói...

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ường Nguyễn nói...

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

Star Cường IT ­ nói...

Ẩ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ường Nguyễn nói...

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

Star Cường IT ­ nói...

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ường Nguyễn nói...

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

Game Mobi nói...

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

Trường Nguyễn nói...

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

Game Mobi nói...

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ường Nguyễn nói...

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

Game Mobi nói...

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

Trường Nguyễn nói...

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

Quốc Hiếu nói...

Cmt thứ 1000

Quốc Hiếu nói...

10000 ???

Trường Nguyễn nói...

10000 đâu ra :v

Quốc Hiếu nói...

Dưới footer kìa ???

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Tính Getter nói...

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ường Nguyễn nói...

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

Tính Getter nói...

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

Trường Nguyễn nói...

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

Tính Getter nói...

Chuyển qua Zomboy - Outbreak :v

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Tính Getter nói...

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

Trường Nguyễn nói...

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

Ngọc Tính IT nói...

Bá quá

Trường Nguyễn nói...

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

Game Mobi nói...

Kinh thật

Trường Nguyễn nói...

Có gì mà kinh vậy ?

Star Đức Blog nói...

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

Trường Nguyễn nói...

Nhắn tin anh
admin.bacsiwindows.com

Star Đức Blog nói...

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

Star Cường IT ­ nói...

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

Trần Thanh Bình nói...

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

Đăng nhận xét