Cách làm hiệu ứng chuyển chạy màu cho tiêu đề blogspot

Thủ thuật hiệu ứng chuyển chạy màu cho tiêu đề blogspot này có từ năm 2019 do bacsiwindow viết kìa, nay thấy có bạn hỏi bên blog mình nên mình copy về để lưu lại. Sau blog bacsiwindow có die đi nữa thì vẫn còn blog mình mà xem :v

Hiệu ứng chuyển chạy màu cho tiêu đề blogspot

Demo thì các bạn xem ngày trên tiêu đề blog mình rồi hả. Mình có thay đổi mấy cái màu so với code gốc thôi.

Các bước thực hiện

Bước 1: Thêm CSS Hiệu ứng chuyển màu text

.font-wave-color, h1{
    line-height: 42px;
    font-size: 30px;
    text-align: left;
    background: linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%);
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 10s BeProud linear infinite;}
@keyframes BeProud {100% { background-position: 100vw 0px }}
@keyframes scroll{10%{margin-top:0}30%{margin-top:0}40%{margin-top:-40px}60%{margin-top:-40px}70%{margin-top:-80px}90%{margin-top:-80px}100%{margin-top:0}}

Bước 2: Khai báo những thành phần chuyển màu text

Bất kì thành phần nào là thẻ h1 hoặc có thẻ class là .font-wave-color sẽ xuất hiện hiệu ứng chuyển màu như DEMO bên trên. Do vậy bạn bạn cần khai báo thêm thẻ class cho chúng!

Bước 3: Thay đổi giá trị màu sắc thay đổi

linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%)

Với:

• 179deg độ nghiêng của phần chuyển màu
• #00004d: Mã màu thứ nhất bắt đầu 0%
• #5333ed 49%: Mã màu thứ 2 bắt đầu 49%
• #2cd4d9 100%: Mã màu thứ 2 bắt đầu 100%

animation: 10s BeProud linear infinite;

Với:

10s: Tốc độ chuyển màu là 10s sẽ hết hiệu ứng, thay đổi lại lại giá trị để thay đổi tốc độ chuyển màu.

Tóm gọn cho dễ làm

Thật ra bài này các bạn để ý phần code nhiều trong khung phía trên ở Bước 1 bê về blog chèn vào CSS là xong khỏi phải lăng tăng. Thích thì chỉnh mấy cái mã màu theo ý thích nữa là ok!

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