Hiệu ứng chuyển màu và chạy màu text cho tiêu đề bài viết

Dưới đây là DEMO của thủ thuật này

BACSIWINDOWS.COM - THỦ THUẬT CSS

Khác với Hiệu ứng chuyển màu Gadient Text nằm trong bài trước. Thủ thuật chuyển màu trong bài viết này sẽ giúp màu chạy cho tiêu đề để tạo ra hiệu ứng thích mắt hơn!

Cách thực hiện:

Bước 1:

Thêm CSS Hiệu ứng chuyển màu text

.BSW-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à

.BSW-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!

Ví dụ ban đầu:

<h2> Thẻ H2 là không có hiệu ứng chuyển màu </h2>

<h2 class="title"> Thẻ H2 là không có hiệu ứng chuyển màu </h2>

Thành:

<h2 class="BSW-font-wave-color"> Thẻ H2 có hiệu ứng chuyển màu rồi </h2>

<h2 class="title BSW-font-wave-color"> Thẻ H2 có hiệu ứng chuyển màu rồi </h2>

Chuyển màu vì có thuộc tính

class="BSW-font-wave-color"

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

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

Hiệu ứng chuyển màu và chạy màu text cho tiêu đề bài viết

- Bác Sĩ Windows -