Thủ thuật tạo chữ nhấp nháy bằng css animation cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Bạn đang muốn làm chữ nhấp nháy trong Blogspot, nhưng ngại sử dụng Javascript hay CSS hay JQUERY vì nó rất phức tạp và làm nặng blog.Với cách làm bằng Blink text lại không đáp ứng được cho bạn. Hôm nay mình sẽ hướng dẫn cho các bạn cách làm chữ nhấp nháy bằng CSS3 dành cho Blogpspot của mình với sự hỗ trợ của thuộc tính @keyframes.

@keyframes có nhiệm vụ điều khiển diễn biến một hoạt động của một thành phần, và cụ thể chính là điều khiển cái phần màu mè của “Chữ nhấp nháy”
Anination có nhiệm vụ làm cho “chữ nhấp nháy ” nhấp nháy

DEMO CHỮ NHẤP NHÁY

1. Đầu tiên bạn đăng nhập Blogger
2. Vào Chủ đề >> Chỉnh sửa HTML
3. Dán đoạn CSS vào trước thẻ ]]></b:skin> và Lưu lại

@-webkit-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-moz-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-o-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
.test {
background:#3d3d3d;
font-size:24px;
font-weight:bold;
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}

– Trong đoạn css trên bạn chỉ cần chú ý 2 thuộc tính @keyframes và animation và:

-moz- hỗ trợ cho firefox.
-webkit- hỗ trợ cho Google Chrome và Safari.

4. Tiếp theo bạn chỉ cần đặt đoạn HTML này ở vị trí bạn muốn là xong

Giải thích chút về code:

@keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}

my: là tên của thuộc tính mình đặt, tên thuộc tính này được animation sử dụng
0%,50%,100%: là các thuộc tính css cho từng giai đoạn, ở đây mình sử dụng thuộc tính color để đổi 2 màu trắng và cam thay đổi nhau

.test {
background:#3d3d3d;
font-size:24px;
font-weight:bold;
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}

Và trong class "test" bạn cho thuộc tính animation chữ trong class chuyển động theo ý bạn

my: là tên animation, và trong trường hợp này thì glowing chính là tên thuộc tính mình đặt ở trên keyframes
700ms: là thời gian chuyển động (1s = 1000ms)
infinite: để cho animation luôn chuyển động (có nghĩa là nó sẽ nhấp nháy mãi).

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