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ì mình gộp lại vào trong một class hết, nhưng đã tách ra để bạn nào chưa biết 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

4/5 - (5 votes)




Subscribe
Notify of
guest

30 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+