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
Chuẩn bị như thế nào ?
Để tạo hiệu ứng ta cần dùng CSS. Ở đâ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.
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 cuối phần lưu trữ CSS cho blog
Bước 3: Chèn đoạn mã này vào:
/* Title post */
h1{
line-height:42px;
font-size:30px;
text-align:left;
background:linear-gradient(60deg,#FC5C7D 0%,#6A82FB 25%,#FC5C7D 50%,#6A82FB 75%,#FC5C7D 100%);color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:10s ChuyenDongMau linear infinite}
@keyframes ChuyenDongMau{
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 h1 .post-title (tức là chọn các class post-title có trong thẻ h1)
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 ChuyenDongMau linear infinite Đánh dấu hiệu ứng chuyển động cho dải màu nền.
- @keyframes ChuyenDongMau{...} Tạo hiệu ứng chuyển động màu với đích là ChuyenDongMau mà chúng ta gọi bên trên.
Vậy là đã xong rồi. Nếu có thắc mắc gì hãy để lại ở phần bình luận nha !
Chúc các bạn thành công!
Credit : lập trình 5S