Css tạo hiệu ứng chạy màu cho thẻ tiêu đề

Css tạo hiệu ứng chạy màu cho thẻ tiêu đề

Hôm nay mình sẽ chia sẻ cho anh em hiệu ứng chuyển động màu cho tiêu đề. Chỉ cần thêm một chút css là có ngay hiệu ứng màu tuyệt đẹp cho blog. Hãy cùng bắt đầu ngay thôi nào


Code hiệu ứng chạy màu cho tiêu đề

Thật ra ta chỉ cần cho 1 đoạn Css vào là ok ngay. Ở đây mình đang làm trên CSS3 được hỗ trợ hầu hết trên các trình duyệt. Như vậy bạn không phải lo về vấn đề tương thích nữa.

Demo xem trực tiếp

Cách sử dụng

Bước 1: Bạn vào Blogger chuyển đến phần Giao diện rồi nhấp vào Chỉnh sửa HTML

Bước 2: Tìm đến ]]></b:skin>

Bước 3: Chèn đoạn bên dưới vào bên trên ]]></b:skin>:


/* Css tạo hiệu ứng màu cho thẻ tiêu đề */
h1{line-height:42px;font-size:30px;text-align:left;background:linear-gradient(60deg,#69d48f 0%,#038686 25%,#01ad09 50%,#50a6d4 75%,#7ac579 100%);color:#fff;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:10s chubang9x linear infinite}@keyframes chubang9x{100%{background-position:100vw 0}}

Bước 4: Lưu lại và xem thành quả thôi nào!

Phân tích CSS hiệu ứng màu

Đầu tiên mình dùng bộ chọn CSS đánh dấu thực thi lên tất cả các thẻ h1. Nếu bạn không muốn ảnh hưởng lên các thẻ h1 chức năng khác thì có thể thay bằng .postTitle h1 (tức là chọn tất cả các thẻ h1 có class postTitle)

Lưu ý :
Có thể thẻ postTitle của theme của bạn có thể   khác theme của blog mình, nên bạn thay đúng với thẻ của mình nha, hoặc các bạn có thể áp dụng với các thẻ h1,h2,h3,h4,h5... Tùy theo sở thích của bạn!

Các thành phần chính

  • background:linear-gradient(...); Tạo hiệu ứng dải màu cho nền
  • -webkit-background-clip:text; Chuyển dải màu nền thành dải màu cho chữ. Nếu không có dòng này trình duyệt sẽ cho kết quả như nền chứa dải màu.
  • animation:10s chubang9x linear infinite Đánh dấu hiệu ứng chuyển động cho dải màu nền.
  • @keyframes Chubang9x{...} Tạo hiệu ứng chuyển động màu với đích là chubang9x mà chúng ta gọi bên trên.

Vậy là đã xong rồi. Nếu có bất kỳ thắc mắc gì, bạn hãy để lại ở phần bình luận phía bên dưới nhé

Chúc các bạn thành công!


Xem thêm:
Đánh giá của bạn về bài viết này?

Đăng nhận xét