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
Cách thực hiện
1- Bạn dán đoạn css sau vào trước thẻ ]]></b:skin>
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{2- Khi sử dụng bạn dùng đoạn HTML theo mẫu sau
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% );}
}
<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.
Tags:
Hieu-ung