Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS

Hello, xin chào các bạn, hôm nay qua blog Bacsiwindows.com mình có bắt chước được một trò đối với CSS là cách để  tự động thay đổi màu nền một đối tượng theo thời gian.

Để hình dung nó trông như thế nào thì các bạn copy nguyên đoạn code dưới đây, dán vào codepen để xem demo.

Link demo: https://codepen.io/hocbanvn/pen/xqYZPw?editors=1000

Sau khi xem, các bạn dòm lại đoạn code trên sẽ thấy rằng, cái class “.menu” xuất hiện 02 lần. Lần thứ nhất là nó định dạng CSS cho cái menu nguyên bản, xuất hiện lần thứ hai là để định dạng cái trò đổi màu.

Đúng ra thì chúng ta gộp lại vào trong một hết, nhưng mà mình tách ra để bạn nào chưa biết thì chúng ta dễ hình dung hơn.

Cách tự động đổi màu đối tượng với CSS

Sau khi xem ví dụ minh họa, bạn nào muốn thử thì làm theo mình. Đầu tiên các bạn chọn một ID, CLASS nào đó trên website, ví dụ cái thanh menu, màu nền website chẳng hạn.

Tiếp theo các bạn copy bê nguyên đoạn code dưới đây dán vào phần CSS của theme. Sau đó đem sửa lại cái ID/ CLASS mà bạn muốn nó đổi màu.

Ví dụ ở trên mình dùng class là “.menu” mà cái bạn muốn đổi màu là nền website thì sửa nó thành “.body” chẳng hạn.

Để chỉnh màu sắc nền và màu chữ thì các bạn chú ý 2 cái dòng sau, chúng có thể được lặp lại nhiều lần, tùy vào sở thích của bạn.

Các bạn có thể sửa nó lại thành màu khác bằng cách đổi giá trị ở màu nền: background-color, và màu chữ: color.

Một cái nữa, trong đoạn CSS nó có mấy đoạn viết là 0.5s, thì cái này là thời gian đổi màu, các bạn có thể cho nó đổi màu chậm hơn bằng cách thay số 0.5s bằng số khác, ví dụ như 5s, 10s gì đó.

Oke, thủ thuật CSS này chỉ thế thôi, bạn nào có gì thắc mắc thì cứ comment bên dưới nghen, với lại bạn nào đã áp dụng thì mạnh dạn khoe ra mình xem thử :v

Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
3 (60%) 4 votes
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là người chém gió nhiều nhất trên Hocban.vn.

12 bình luận

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )