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

HIỆU ỨNG CHUYỂN MÀU

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.
.color-gradient
{
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ẻ class "color-gradient" hoặc được khai báo trong css thì sẽ xuất hiện hiệu ứng.
Bước 3:
Thay đổi giá trị màu sắc thay đổi: linear-gradient
Thay đổi giá trị tốc độ: animation

0/BÌNH LUẬN

BẠN ĐANG CHẶN QUẢNG CÁO

Vui lòng tắt plugin Adblock trong trình duyệt và phần mềm diệt virus (nếu có) sau đó nhấn vào

Disable Adblock & Reload

để tiếp tục hỗ trợ trang web đang phát triển này