Thay Đổi Background Menu Với CSS Gradient Background Animation

Thay Đổi Background Menu Với CSS Gradient Background Animation

Hôm nay tôi sẽ hướng dẫn các bạn cách thay đổi background menu bằng CSS. Ok đi thẳng vào vấn đề luôn :v Demo Các bạn thêm đoạn code ...
51 Comment 13:44
Hôm nay tôi sẽ hướng dẫn các bạn cách thay đổi background menu bằng CSS. Ok đi thẳng vào vấn đề luôn :v

Demo

Các bạn thêm đoạn code sau đây vào trước thẻ ]]></b:skin>

 #header-wrapper {
 
 color: #fff;
 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 400% 400%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@-moz-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
} 


Thay #header-wrapper
thành class hoặc id menu của bạn.
Thay Đổi Background Menu Với CSS Gradient Background Animation Thay Đổi Background Menu Với CSS Gradient Background AnimationLò Bát Quái8.8stars based on9reviewsHôm nay tôi sẽ hướng dẫn các bạn cách thay đổi background menu bằng CSS. Ok đi thẳng vào vấn đề luôn :v Demo Các bạn thêm đoạn code ...

51 nhận xét:

  1. Màu quá cũng ko đẹp mô cụ ơi

    Trả lờiXóa
  2. màu mè tùy sở thích mỗi người :v

    Trả lờiXóa
  3. màu chạy nhanh quá :V
    nhưng mà đẹp
    khi nào ra bài đổi màu chân trang đi :V

    Trả lờiXóa
  4. Trả lời
    1. cho tôi xin cái temp này với :(
      chờ mãi bên kia chưa gửi :(
      https://www.nguyendienblog.ooo/2018/08/chia-se-template-park-edited.html
      - gmail: www.checkpass.com@gmail.com

      Xóa
    2. temp bên diện ý ông :
      https://www.nguyendienblog.ooo/2018/08/chia-se-template-park-edited.html
      nó css bố cục rồi á

      Xóa
    3. send link fb send cho :v mail lms á

      Xóa
    4. fb die đang phải đi sài ké nè ông :(

      Xóa
  5. hế lô anh ơi :D
    https://www.leanhduc.xyz/2018/08/event-1000000-view-mon-qua-nho-nho.html

    Trả lờiXóa
  6. nó làm giảm tốc độ load :V nên để đơn giản là tốt nhất

    Trả lờiXóa
  7. theme chất vkl , hóng admin Qúy share

    Trả lờiXóa
  8. Cái này hôm bữa tôi đưa thì phải

    Trả lờiXóa
  9. hello :D ra bài mới đi ông tui hóng :D

    Trả lờiXóa
  10. anh chỉnh lại cái https đi...em thấy nó ko có màu xanh

    Trả lờiXóa
    Trả lời
    1. Chả biết lỗi gì mặc dù đã fix các link thành https rồi

      Xóa
    2. do js đã bị mã hóa hoặc là người dùng nặc danh comment ...thiết nghĩ klaf vậy đó haha

      Xóa
  11. a ơi, còn lk không cho e 1 chỗ với <3
    https://adminthaoxamlone.blogspot.com

    Trả lờiXóa
  12. hay lắm bạn hiền :)
    PS: giúp tôi 1 liên kết nhé "click vào đầy"

    Trả lờiXóa
  13. test cmt code
    [pre css] #header-wrapper {

    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    }

    @-webkit-keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }

    @-moz-keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }

    @keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    } [/pre]

    Trả lờiXóa