Home
Hiệu ứng

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.

Tự động thay đổi màu chữ cho blogspot với css
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.


Publis: 

10 comments

  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é! :)
    1. Cảm ơn bác.
  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!
    :)
    1. 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é! :)
  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
    1. Chắc cậu là Ngô Quang Trường vì thấy cái Copyright có trang chia sẻ template dạo :D nhưng sao lại có cả trang của Nguyễn Văn Giang (chắc gộp liên kết luôn)
    2. admin ơi- cho mình xin cái template hiện đang sử dụng này ko- kết quá, cái đang chia sẻ thì phần tìm kiếm menu trên di động ko đẹp như cái này- email của mình là: ngolong.nd@gmai.com- cảm ơn bạn cùng tên nhé :)
    3. Chỉ là chỉnh sửa một chút css của cái tìm kiếm thôi mà:
      #search-me input#search-boxs1[type="text"]{background:#000;height:34px;line-height:33px;margin:0;padding:0 10px;width:100%;border:none;color:#fff!important;z-index:5}
      #search-me input#search-button1[type="submit"]{font-family:FontAwesome;font-size:17px;background:#f90;color:#fff;height:34px;line-height:30px;margin:0 1px 0 0;padding:0 10px;border:none;outline:none;font-weight:normal!important;transition:all 0.25s;position:absolute;right:0;top:2px;z-index:2}
      #search-me input#search-boxs1[type="text"]:focus{background:#777;outline:none;color:#fff}
      -background:#000 là màu nền cái tìm kiếm cho trùng với màu nền menu
      - background:#f90 là màu nút sumit
      - background:#777 màu cái tìm kiếm khi click nhập từ khóa tìm kiếm.
    4. Dạo này bác ra templete nhiều nhỉ? Càng ngày bác càng Pr0 hơn đấy. Em cũng muốn làm vài cái nhưng ngại nỗi lười và hơi gà hihi. :))
    5. Thực chất chỉ là mông má tý giao diện trang chủ và phần bài viết(thay đổi mẫu mã)bằng cách thêm bớt tiện ích còn nền tảng vẫn thế :D
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji