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



<html lang="vi">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
               
        
        .menu {
         color: white;
         text-decoration: none;
         background: black;
         padding: 5px;
         width: 80px;
         text-align: center;
         }
        
         .menu{
         animation: colorBackground 0.5s infinite;
         -webkit-animation: colorBackground 5s infinite;
         -moz-animation: colorBackground 5s infinite;
         -o-animation: colorBackground 0.5s infinite
         }
         @keyframes colorBackground {
         0% {
         background-color: yellowgreen;
         color: white;
         }
         50% {
         background-color: red;
         color: yellow;
         }
         }
 
         .menu:hover {
         background: yellow;
         color: red;
         }
         .menu:active {
         background: green;
         }
      </style>
   </head>
   <body>
      <div class="menu">
         <p> Menu  </p>
      </div>
   </body>
</html>

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.

.menu{
         animation: colorBackground 0.5s infinite;
         -webkit-animation: colorBackground 5s infinite;
         -moz-animation: colorBackground 5s infinite;
         -o-animation: colorBackground 0.5s infinite
         }
         @keyframes colorBackground {
         0% {
         background-color: yellowgreen;
         color: white;
         }
         50% {
         background-color: red;
         color: yellow;
         }
         }

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.

background-color: red;
color: yellow;

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

Bài viết được đề xuất

Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
4 (80%) 1 vote[s]

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, dễ thương VL 😂

avatar
5 Comment threads
9 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Học LuậtĐạt NguyễnNạp game mobile giá rẻHocban.vnVỹ Spirit Recent comment authors
Đạt Nguyễn <span class="wpdiscuz-comment-count">150 bình luận </span>
Đạt Nguyễn 150 bình luận

Cái này có vẻ hay nha – thấy bài này của bác Tịnh nảy ra ý tưởng làm cho màu sắc nick thành viên đổi màu, và đổi màu theo level – đang phát triển cái hệ thống tính điểm comment mỗi comment tăng random từ 1-5 exp, level 1 là 10 exp, level 2 là 20exp, tổng điểm exp chia cho mốc exp ra level và mỗi level có màu sắc riêng

Đạt Nguyễn <span class="wpdiscuz-comment-count">150 bình luận </span>
Đạt Nguyễn 150 bình luận

Đang đau đầu chỗ nâng level – chức năng thành viên có bản xong rồi, đang phát triển thêm tính năng mới và chức năng thành viên đăng truyện – cái đăng truyện hơi khó do cấu trúc truyện và chương web mình nó đi kiểu khác so với đăng bài thông thường

Học Luật <span class="wpdiscuz-comment-count">36 bình luận </span>

Css này đơn giản mà hữu dụng, like (y)

Học Luật <span class="wpdiscuz-comment-count">36 bình luận </span>

Mấy web truyện hay web kiểu teen sử dụng css này thì sinh động phải biết, Tịnh nhỉ

Nạp game mobile giá rẻ <span class="wpdiscuz-comment-count">3 bình luận </span>

Comment rồi sao không thấy gì nhỉ

Nạp game mobile giá rẻ <span class="wpdiscuz-comment-count">3 bình luận </span>

Comment thử coi có backlink ko 😀

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Đọc title em tưởng là đổi màu theo thời gian đã định trước chứ 😂
Mà đứa nào ác nhơn vote bác Tịnh 1 sao vậy biết 😂

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Em nghĩ cái này nó đổi theo bộ đếm, ví dụ bác đặt 3 giây sau nó đổi từ tím sang đỏ. Còn em lại hiểu là đến giờ nào đó thì nó tự động đổi 😀