Bài viết được đăng tại nguyenlediep.com - không copy dưới mọi hình thức.
NLD Code - Hướng dẫn tạo chữ nhấp nháy bằng css animation cho website. Bạn muốn tạo chú ý cho một chữ, một vài chữ hoặc thậm chí một đoạn văn bản trên website???
Tạo trang HTML với đoạn code sau
<!DOCTYPE html> <html lang="en"> <head> <title>Tạo chữ nhấp nháy</title> </head> <body> </body> </html>
Tạo tag HTML với class nhapnhay và dòng chữ nhấp nháy
<!DOCTYPE html> <html lang="en"> <head> <title>Tạo chữ nhấp nháy</title> </head> <body> <section class="nhapnhay">Nhấp nháy</section> </body> </html>
Viết code animation để tạo chữ nhấp nháy
@-webkit-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@-moz-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@-o-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
Gắn animation vào class nhapnhay
.nhapnhay {
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}
Code hoàn chỉnh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tạo chữ nhấp nháy</title>
<style type="text/css">
@-webkit-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@-moz-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@-o-keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
@keyframes my {
0% {
color: #ffff00;
}
50% {
color: #fff;
}
100% {
color: #ffff00;
}
}
.nhapnhay {
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}
</style>
</head>
<body>
<section class="nhapnhay">Nhấp nháy</section>
</body>
</html>
Kết quả sau khi chạy đoạn code trên
Nhấp nháy
