Thủ thuật blogspot - Dautoblog

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

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.


6 nhận xét :

  1. DVD sang thăm nhà, quá trời kiến thức hay, nhất là về blogspot :))
    Chúc HL vui khỏe, an lành nhé! :)

    Trả lờiXóa
  2. DVD đang thử nghiệm templates của blogspot mới,
    DVD rất thích templates này:

    https://dvdthutemplate.blogspot.com/

    nhưng template này không hiện icon người viết cảm nhận, không thể chèn emoticon vào bài đăng, không thể chèn emoticons và hình ảnh vào cảm nhận, chán quá...
    HL giúp DVD nhé! DVD rất cảm ơn!
    Chúc HL ngày thứ sáu an lành!
    :)

    Trả lờiXóa
    Trả lời
    1. Bác làm theo bài này:
      Bài này
      Bước 2 thay vì tìm thẻ:
      <data:blogTeamBlogMessage/>
      bác tìm thẻ:
      <a name='comments'/>
      và đặt sau nó còn các bước khác vân như hướng dẫn.

      Xóa
    2. Rất cảm ơn HL đã nhiệt tình hồi âm, DVD sẽ thực hiện như HL hướng dẫn.
      Chúc HL vui khỏe nhé! :)

      Xóa
  3. Chắc đây lần đầu e cmt trên blog của bác :D Nhiều cái hay là lạ quá :) Chắc cũng là 1 "Tiền Bối" blogspot đây

    Trả lờiXóa