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.
Trường Nguyễn - - 67 bình luận
Tag
  • Bình luận (67)
  • Emoticon
    1. Trả lời
      1. Hiệu ứng bằng CSS đó em, F5 lại trang đi là thấy.

        Xóa
    2. Ô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óa
      Trả lời
      1. #7577a9 nha, mà thay chữ B bằng chữ W dùm t nha ^^

        Xóa
      2. Em tưởng a thích #68999c chứ

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

        Xóa
    3. Hay lắm anh, ký tên: Star Sơn IT

      Trả lờiXóa
      Trả lời
      1. Mà cái này gọi là đậm dần nghe đúng hơn đó anh

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

        Xóa
      3. Đây em đây, tại đang dùng mail khác

        Xóa
    4. Trả lời
      1. Hóng share nút backtop :3 :v =))

        Xóa
      2. Ok cũng định viết :D

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

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

        Xóa
      5. 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

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

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

        Xóa
      8. Nhắn tin anh
        admin.bacsiwindows.com

        Xóa
      9. Rep đi anh, Nguyễn Chánh Đức á =)) ==

        Xóa
    5. Ẩ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óa
      Trả lời
      1. Dichmia mới làm xong chưa kịp responsive :3

        Xóa
      2. 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à.

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

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

      Trả lờiXóa
      Trả lời
      1. Hello!! Cảm ơn Huy Rocket 1h nhé ;)

        Xóa
      2. 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ơ :)

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

        Xóa
      4. Sài rồi mới thấy hay chứ gì @@

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

        Xóa
    7. Trả lời
      1. Dưới footer kìa ???

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

        Xóa
      3. Tội VL, ảo tưởng sức mạnh :v

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

        Xóa
      5. 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

        Xóa
      6. Đâu dữ vậy, không tới 5N đâu :v

        Xóa
      7. Klq mà đang phiêu Turn Down For What hay vcl :v

        Xóa
      8. 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

        Xóa
      9. Chuyển qua Zomboy - Outbreak :v

        Xóa
      10. Đang quẩy EDM mình ên à :v

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

      Trả lờiXóa
      Trả lời
      1. BSW mà không bán đi - lập lại thì chắn chắc hơn 5 - 6N :3

        Xóa
      2. E hổng hiểu gì luôn :v

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

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

      Trả lờiXóa
    10. Cmt blog toàn những thằng trẻ trâu đú, chỉ đc vài người :)

      Trả lờiXóa

  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3