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:
Demo xem ngay tại trang chủ https://www.bacsiwindows.com
@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.
Cách thực hiện
Thêm toàn bộ CSS này vào trước thẻ ]]></b:skin> trong mẫubody {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á
Trả lờiXóaĐạo
XóaCái gì đây a
Trả lờiXóaHiệu ứng bằng CSS đó em, F5 lại trang đi là thấy.
XóaÔ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ờiXóaMã #7577a9 nha, mà thay chữ B bằng chữ W dùm t nha ^^
XóaEm tưởng a thích #68999c chứ
XóaỪm lúc trước là màu đó, mà thấy đậm quá nên đổi thành #7577A9 rồi!
XóaChất :V
Trả lờiXóaChất thật :3
XóaThanks nhé :v đang cần :3
Trả lờiXóaOki ngon :3
XóaHay lắm anh, ký tên: Star Sơn IT
Trả lờiXóaMà cái này gọi là đậm dần nghe đúng hơn đó anh
XóaSao Star Sơn lại là Sói Xám TV?
XóaĐây em đây, tại đang dùng mail khác
Xóa:v
XóaHay lắm anh, đang cần :3
Trả lờiXóaOki em :3
XóaHóng share nút backtop :3 :v =))
XóaOk cũng định viết :D
XóaĐẹp phết anh ạ, template này bao nhiêu ? giá cả hợp lí em xúc về nhà =)) :v
XóaOnly 100k thôi em :3
Xóaráng đợi em tầm mấy ngày nữa em xúc nó về :3 =))
XóaĐã gửi cho em nhé.
XóaDạ thanks anh <3 =))
Xóa:D
XóaAnh Trường ơi em xúc theme hiện tại :v =))
XóaNhắn tin anh
Xóaadmin.bacsiwindows.com
Rep đi anh, Nguyễn Chánh Đức á =)) ==
XóaẨ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ờiXóaDichmia mới làm xong chưa kịp responsive :3
XóaTui là tui kết ông lắm á :v ngồi f5 nãy giờ hóng res để bơ về mà lâu quá hà.
XóaỪ hóng típ đi nhé :3 giờ t đi ngủ xíu đã, mệt quá :v
XóaHuyrocket đến thăm blog đây. <3
Trả lờiXóaBài viết hơn cả tuyệt vời đấy a Trường :)
Hello!! Cảm ơn Huy Rocket 1h nhé ;)
XóaKg 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ơ :)
Xóa:v tên nghe hay mà, có gì đâu!!
XóaSài rồi mới thấy hay chứ gì @@
XóaÉc, nói tên Huy Rocket 1h hay mà @@
XóaCmt thứ 1000
Trả lờiXóa10000 ???
Xóa10000 đâu ra :v
XóaDưới footer kìa ???
XóaĐể 9999 cho đẹp thoai, chưa được 5000 cmt nữa :3
XóaTội VL, ảo tưởng sức mạnh :v
XóaTự thủ râm tinh thần ý mà :v vậy cũng 'lừa' được vài người :v
XóaAnh 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
XóaĐâu dữ vậy, không tới 5N đâu :v
XóaKlq mà đang phiêu Turn Down For What hay vcl :v
XóaBầu trời is blue, con c* is black, lông láck is brown...
XóaHỡi Thánh Phật trên cao /=hup TURN DOWN FOR WHAT :v
Chuyển qua Zomboy - Outbreak :v
XóaĐang quẩy EDM mình ên à :v
Xóa5k comment là của đó ta cường nha tính gét tơ :v
Trả lờiXóaBSW mà không bán đi - lập lại thì chắn chắc hơn 5 - 6N :3
XóaE hổng hiểu gì luôn :v
XóaÝ nói là 5k bình luận là của blog Star Cường IT...
XóaKinh thật
XóaCó gì mà kinh vậy ?
XóaBá quá
Trả lờiXóaĐơn giản nhưng bá nhở :3
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaCmt blog toàn những thằng trẻ trâu đú, chỉ đc vài người :)
Trả lờiXóa