Tạo bài viết

Thêm ảnh
Animation Framework CSS Thủ Thuật Blogspot Tạo hiệu ứng Slide và fadeIn cho Blogspot bằng Animation CSS
  • Lưu bài viết

    Lưu bài viết để xem sau

  • Chia sẻ bài viết

    Chia sẻ bài viết lên Facebook

  • Đăng bình luận

    Bình luận về bài viết này

  • Báo lỗi bài viết

    Báo lỗi hoặc góp ý bài viết

    • Tạo hiệu ứng Slide và fadeIn cho Blogspot bằng Animation CSS

    Quản trị viên
    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à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
    Chia sẻ

    Huỳnh Phụng Blogger

    Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được