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ý.
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"
<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!