[Tips WordPress] Hướng dẫn tạo menu chuyển màu với Animation Gradient

9 Likes Comment

Để có được một menu thay đổi màu theo tùy thích của bản thân thật sự rất thích phải không ạ, nhiều bạn lại hay dùng các plugins bên ngoài để gắn vào wordpress đó cũng là một giải pháp cho những bạn không rành về code

Hôm nay mình chia sẻ với một số bạn biết qua một số các thủ thuật để biết được các thẻ trong wordress để chỉnh sửa css, không dùng plugins, tránh lạm dụng bộ nhớ một cách vô tội vạ.

Bước 1: Mở file Style.CSS

Để làm được điều này bạn cần vào bảng điều khiển của blog wordpress chọn Giao diện và sửa giao diện, chọn file style.css

 

Bước 2: Copy đoạn mã css animation gradient background

Để biết được menu bạn, bạn cần phải biết được vùng chọn menu với id là gì, ở đây vùng chứa menu mình là id #primary-bar 

#primary-bar {
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;
z-index: 1;
}

 

Để hiển thị được sự thay đổi trên các trình duyệt bạn cần copy đoạn keyframes sau vào 

/* Gradient Background */
@-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%
}
}

Lưu lại và xem thành quả, chúc bạn thành công.

Bạn có thể thích