الصفحة الرئيسية
blogger

Hiệu ứng chữ chuyển màu cho blog/website

hiệu ứng chữ chuyển màu, chữ đổi màu, code chữ đổi màu, đổi màu chữ bằng css, hiệu ứng chữ nhiều màu, hiệu ứng chữ đẹp, hiệu ứng đổi màu liên tục

Hiệu ứng chữ chuyển màu cho blog/website

Nhiều bạn có nhu cầu trang trí với các hiệu ứng khác nhau để tô thêm vẻ sinh động cho blog/website của mình, như tự động thay đổi màu nền, hoa mai rơi, tuyết rơi... trong đó hiệu ứng thay đổi màu chữ theo thời gian cũng là một lựa chọn hợp lý.

Hiệu ứng chữ chuyển màu cho blog/website
Hiệu ứng chữ chuyển màu cho blog/website

Dưới đây là code và hướng dẫn sử dụng hiệu ứng chữ chuyển màu với CSS3 đơn giản.

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

  • Bước 1: Copy và dán đoạn css sau vào trước thẻ đóng </body>
    • 
<style>
.codepro-auto-text{color:black;animation:myfirst 15s;animation-iteration-count:infinite;-webkit-animation:myfirst 15s;-webkit-animation-iteration-count:infinite;font-family:Arial;font-weight:bold;font-size:25px;text-decoration:none;text-align:center}@keyframes myfirst{0%{color:hsl(  10,90%,60% )}6%{color:hsl(  30,90%,60% )}12%{color:hsl(  50,90%,60% )}18%{color:hsl(  70,90%,60% )}24%{color:hsl(  90,90%,60% )}30%{color:hsl( 110,90%,60% )}36%{color:hsl( 130,90%,60% )}42%{color:hsl( 150,90%,60% )}48%{color:hsl( 170,90%,60% )}54%{color:hsl( 190,90%,60% )}60%{color:hsl( 210,90%,60% )}66%{color:hsl( 230,90%,60% )}72%{color:hsl( 250,90%,60% )}78%{color:hsl( 270,90%,60% )}84%{color:hsl( 290,90%,60% )}90%{color:hsl( 310,90%,60% )}96%{color:hsl( 330,90%,60% )}100%{color:hsl( 350,90%,60% )}}@-webkit-keyframes myfirst{0%{color:hsl(  10,90%,60% )}6%{color:hsl(  30,90%,60% )}12%{color:hsl(  50,90%,60% )}18%{color:hsl(  70,90%,60% )}24%{color:hsl(  90,90%,60% )}30%{color:hsl( 110,90%,60% )}36%{color:hsl( 130,90%,60% )}42%{color:hsl( 150,90%,60% )}48%{color:hsl( 170,90%,60% )}54%{color:hsl( 190,90%,60% )}60%{color:hsl( 210,90%,60% )}66%{color:hsl( 230,90%,60% )}72%{color:hsl( 250,90%,60% )}78%{color:hsl( 270,90%,60% )}84%{color:hsl( 290,90%,60% )}90%{color:hsl( 310,90%,60% )}96%{color:hsl( 330,90%,60% )}100%{color:hsl( 350,90%,60% )}}
</style>
  • Bước 2: Để sử dụng ta gọi đến class="codepro-auto-text", ví dụ:
    • <div class='codepro-auto-text'>nội dung cần đổi màu</div>

    Lời kết

    Trên đây là toàn bộ code hiệu ứng chữ chuyển màu cho blog/website. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

    Copyright © Xuan Trung FZ