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

Có thể bạn cũng thích những bài này

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

guest
16 Comments
Inline Feedbacks
View all comments
Lê Văn Tam <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend
Lê Văn Tam (2)

Khá hay, để em thử luôn xem thế nào, Thanks bác

Đạt Nguyễn <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">163</span><span style="color: #e91e63;">) </span>
Member

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">163</span><span style="color: #e91e63;">) </span>
Member
Đã trả lời  Đạt Nguyễ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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">44</span><span style="color: #e91e63;">) </span>
Friend

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

Học Luật <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">44</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Học Luật

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #e91e63;">) </span>
Friend

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

Nạp game mobile giá rẻ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #e91e63;">) </span>
Friend

Comment thử coi có backlink ko 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">116</span><span style="color: #e91e63;">) </span>
Friend

Đọ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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">116</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

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 😀