Chắc không cần phải nói gì thêm đâu nhỉ vì ngay trên bài viết này bạn cũng thấy được một hiệu ứng khá đặc biệt đó là tự động thay đổi màu nền trong blogspot. Đây là cách trang trí trang blogspot của bạn một cách đơn giản nhưng không kém phần bắt mắt và chuyên nghiệp. Nếu bạn muốn cài đặt hiệu ứng này cho blog của mình cũng khá đơn giản.
Chỉ cần thêm đoạn code sau trước thẻ ]]></b:skin>
body { animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ }/* blogduykhanh.blogspot.com */ @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } }
Chúc các bạn thành công
- - 0 bình luận
CHUYÊN MỤC

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)