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

Anh Trai Nắng
0
Thủ thuật làm hiệu ứng chuyển chạy màu cho tiêu đề blogspot này sẽ giúp màu chạy cho tiêu đề để tạo ra hiệu ứng thích mắt hơn

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

Cách làm hiệu ứng chuyển chạy màu cho tiêu đề blogspot
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!

    Đăng nhận xét

    HƯỚNG DẪN BÌNH LUẬN

    0 Nhận xét

    Đăng nhận xét (0)

    #buttons=(Thanks!) #days=(7)

    À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
    Ok, Go it!

    HƯỚNG DẪN BÌNH LUẬN

    Chèn link

    Sử dụng công cụ Tạo link

    Chèn hình ảnh

    LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

    Định dạng chữ

    <b>Chữ in đậm</b>
    <i>Chữ in nghiêng</i>
    <u>Chữ gạch chân</u>
    <strike>Chữ gạch ngang</strike>

    Chèn một đoạn Code

    Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

    Khác

    Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
    Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
    Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
    Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

    Đã hiểu