Hiệu ứng thay đổi màu chữ liên tục đơn giản bằng CSS cho Blogspot

hieu ung thay doi mau chu lien tuc don gian bang css cho blogspot

Đây là một thủ thuật giúp bạn trang trí trang cá nhân của bạn trở nên sinh động và thu hút sự chú ý của người đọc hơn bằng cách thay đổi màu chữ của một đối tượng nào đó một cách liên tục với tất cả các màu sắc. Bên cạnh đó, thủ thuật này chỉ sử dụng CSS nên sẽ không làm ảnh hưởng đến tốc độ tải trang của bạn.

Bạn có thể xem DEMO ở bên dưới để biết hiệu ứng của thủ thuật này hoạt động như thế nào nhé!

SOCBAY

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Hiệu ứng tự động thay đổi màu chữ liên tục

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>, sau đó nhấn vào nút Lưu chủ đề.

.change-color {font-size:50px; font-weight:700; animation:myfirst 15s; -webkit-animation:myfirst 15s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite}
@keyframes myfirst {
0% {color:hsl(5,96%,69%)}
5% {color:hsl(25,96%,69%)}
10% {color:hsl(45,96%,69%)}
15% {color:hsl(65,96%,69%)}
20% {color:hsl(85,96%,69%)}
25% {color:hsl(105,96%,69%)}
30% {color:hsl(125,96%,69%)}
35% {color:hsl(145,96%,69%)}
40% {color:hsl(165,96%,69%)}
45% {color:hsl(185,96%,69%)}
50% {color:hsl(205,96%,69%)}
55% {color:hsl(225,96%,69%)}
60% {color:hsl(245,96%,69%)}
65% {color:hsl(265,96%,69%)}
70% {color:hsl(285,96%,69%)}
75% {color:hsl(305,96%,69%)}
80% {color:hsl(325,96%,69%)}
85% {color:hsl(345,96%,69%)}
90% {color:hsl(365,96%,69%)}
95% {color:hsl(385,96%,69%)}
100% {color:hsl(405,96%,69%)}
}
@-webkit-keyframes myfirst {
0% {color:hsl(5,96%,69%)}
5% {color:hsl(25,96%,69%)}
10% {color:hsl(45,96%,69%)}
15% {color:hsl(65,96%,69%)}
20% {color:hsl(85,96%,69%)}
25% {color:hsl(105,96%,69%)}
30% {color:hsl(125,96%,69%)}
35% {color:hsl(145,96%,69%)}
40% {color:hsl(165,96%,69%)}
45% {color:hsl(185,96%,69%)}
50% {color:hsl(205,96%,69%)}
55% {color:hsl(225,96%,69%)}
60% {color:hsl(245,96%,69%)}
65% {color:hsl(265,96%,69%)}
70% {color:hsl(285,96%,69%)}
75% {color:hsl(305,96%,69%)}
80% {color:hsl(325,96%,69%)}
85% {color:hsl(345,96%,69%)}
90% {color:hsl(365,96%,69%)}
95% {color:hsl(385,96%,69%)}
100% {color:hsl(405,96%,69%)}
}

Bước 3. Bây giờ, bạn chỉ cần đặt đoạn mã HTML hiển thị dưới đây vào vị trí mà bạn muốn.

<div class="change-color">SOCBAY</div>

Thật đơn giản phải không nào! Bây giờ, bạn có thể dễ dàng làm đẹp trang cá nhân và thu hút sự chú ý của người đọc chỉ bằng thủ thuật cực kỳ đơn giản này.

Chúc bạn thành công!