Hiệu ứng Nhấp Nháy Css Animation - Thietkeonline - Text Flashes Css

Trang chủ » Hiệu ứng Chữ Css » Hiệu ứng Nhấp Nháy Css Animation - Thietkeonline - Text Flashes Css

Có thể bạn quan tâm

MENU Thiết kế website Cam Ranh - Nha Trang chuẩn SEO, uy tín - giá rẻ
  • 0378 611 642
  • Trang Chủ
  • Thiết kế website
  • Báo giá website
  • DỊCH VỤ WEBSITE
    • Quảng cáo Google Adwords
    • Quảng cáo Fanpage - Facebook
    • Đăng tin rao vặt
    • Quản trị website tại Cam Ranh - Nha Trang
    • SEO từ khóa top google
  • Chia sẻ
  • Liên hệ
  • 0378 611 642
  • 0378 611 642
  • Chia sẻ
Làm chữ nhấp nháy css animation Bạn đang muốn làm hiệu ứng chữ nhấp nháy đơn giản bằng CSS nhưng bạn không muốn sử dụng Javascritp và Jquery. Hôm nay mình sẽ hướng dẫn cho các bạn làm text nhấp nháy bằng css với thuộc tính animation và sự hỗ trợ của thuộc tính @keyframes.

Demo:http://demohai.phpvnn.com/chu-nhap-nhay-css

Làm chữ nhấp nháy css animation

HTML

<html>

<head></head>

<body>

< div class="text-pr text-fl >

< a class="text-1" href="/blog" > Xem < span class="off-fl" > Th < /span > êm < /a >

< /div >

</body>

</html>

CSS

.text-fl a{

color: #d93337;

font-size:6em;

letter-spacing:10px; //Khoảng cách các chữ cái

animation: text-flicker 4s linear infinite; //animation này kếp hợp vs @keyframe

}

#off-fl

animation: letter-flicker 2s linear infinite;//animation này kếp hợp vs @keyframe

}

@keyframes text-flicker {

0% {

opacity:0.1;

text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);

}

2% {

opacity:1;

text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);

}

8% {

opacity:0.1;

text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);

}

9% {

opacity:1;

text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);

}

12% {

opacity:0.1;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

20% {

opacity:1;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

25% {

opacity:0.3;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

30% {

opacity:1;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

70% {

opacity:0.7;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

72% {

opacity:0.2;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

77% {

opacity:0.9;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

100% {

opacity:0.9;

text-shadow: 0px 0px rgba(242, 22, 22, 1);

}

}

Lưu ý:

@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 phần màu sắc của chữ "xem thêm"

anination có nhiệm vụ làm cho “xem thêm ” nhấp nháy

0%, 2%, 8% ... 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 opacity để làm chữ lúc ẩn lúc hiện

text-flicker : 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

4s: là thời gian chuyển động (1s = 1000ms)

linear chuyển động cùng 1 tốc độ từ đầu đến cuối

infinite : để cho animation luôn chuyển động (có nghĩa là nó sẽ nhấp nháy mãi)

Cùng danh mục

Tư vấn ngay Zalo liên hệ thiết kế website Liên hệ Thiết Kế Website Nha Trang - Cam Ranh 4.9 568

THIẾT KẾ WEB NHA TRANG - CAM RANH

  • Số 555, đường 2 tháng 4, Vĩnh Phước, Nha Trang, Khánh Hòa
  • Tỉnh lộ 9, Cam Phước Đông, Cam Ranh, Khánh Hòa

  • 0378 611 642 (Mr. Hải)

  • Websitechuanseoline@gmail.com

DỊCH VỤ

Quảng cáo Google Adwords Quảng cáo Fanpage - Facebook Đăng tin rao vặt Quản trị website tại Cam Ranh - Nha Trang SEO từ khóa top google Thiết kế Website Nha Trang - Cam Ranh

TAGS

  • Thiết Kế Website Giá Rẻ Nha Trang
  • Thiết Kế Website Nha Trang
  • Thiết Kế Website Chuyên Nghiệp
  • Thiết Kế Website Chuẩn SEO
  • Thiết Kế Web Cam Ranh
  • Thiết Kế Website Bán Hàng
  • Thiết Kế Website Công Ty
  • Thiết Kế Website Công Ty

ĐIỀU KHOẢN

  • Phương Thức Thanh Toán
  • Bàn giao web
  • Điều Khoản Sử Dụng Hosting
  • Bảo Hành - Cam Kết
  • Hướng Dẫn Sử Dụng Web
  • Điều Khoản Sử Dụng Tên Miền
  • Các Tính Năng Website
  • So Sánh Tính Năng Các Gói

Từ khóa » Hiệu ứng Chữ Css