Tự động thay đổi màu chữ cho blogspot với css

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 blogspot 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à hướng dẫn các bạn cách tự động thay đổi màu chữ chỉ với css3 rất gọn nhẹ và đẹp mắt.

DEMO

Tự động thay đổi màu chữ chỉ với css3

Cách thực hiện
1- Bạn dán đoạn css sau vào trước thẻ ]]></b:skin>

.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% );}
}

2- Khi sử dụng bạn dùng đoạn HTML theo mẫu sau

<div class='auto-text'>Đoạn chữ cần đổi màu</div>

Như vậy là bạn đã có đoạn chữ hay một tiêu đề cần trang trí cho blogspot.