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 |
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
<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>
<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
7 comments