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.
Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm
Tác giả: Trường Nguyễn
Ngày đăng: 10/03/2018 lúc
Tổng số bình luận: 0
VỀ TÁC GIẢ
Trường Nguyễn - Thành lập, điều hành và phát triển Bác Sĩ Windows's Blog. Một chàng trai 18 tuổi, năng động và ham học hỏi!

BÌNH LUẬN (0)