Trong khi phát triển một ứng dụng web, các nhà phát triển luôn có xu hướng triển khai các thuộc tính tạo kiểu CSS một cách hiệu quả. CSS cung cấp một số thuộc tính tạo kiểu, chẳng hạn như màu sắc, vị trí, căn chỉnh và nhiều thuộc tính khác. Ngoài các thuộc tính này, nó cho phép chúng tôi thiết lập hành động hoạt ảnh trên các phần tử. Với mục đích này, “ @keyframe S ” quy tắc sẽ được sử dụng.
Bài viết này sẽ trình bày cách chúng ta có thể tạo văn bản nhấp nháy/nhấp nháy bằng CSS.
Làm cách nào để tạo văn bản nhấp nháy bằng CSS?
Để làm cho văn bản nhấp nháy, CSS “ độ mờ đục ” tài sản với “ @keyframes ” quy tắc có thể được áp dụng. Kiểm tra các ví dụ dưới đây.
Ví dụ 1: Tạo văn bản nhấp nháy
Trong HTML, thêm một “ Hãy chuyển sang tạo kiểu cho các phần tử HTML. Phong cách 'kiểu nhấp nháy' div CSS “ lai lịch ” thuộc tính được áp dụng cho phần tử div với lớp “ kiểu chớp mắt ”. Phần tử kiểu “h3” HTML “ ” phần tử được trang trí với các thuộc tính CSS sau: Áp dụng “quy tắc @keyframe” cho hoạt ảnh “văn bản nhấp nháy” Tên hoạt hình “ văn bản nhấp nháy ” được chỉ định trong thuộc tính hoạt hình. Các ' @keyframe ” quy tắc được thêm vào trước tên hoạt ảnh biểu thị hành vi hoạt ảnh ở các khoảng thời gian khác nhau như được đề cập bên dưới: đầu ra Ví dụ 2: Tạo nhiều văn bản nhấp nháy Để tạo nhiều văn bản nhấp nháy trong HTML, hãy làm theo các bước dưới đây: ” đầu tiên được gán một lớp “ nhấp nháy ”. Bây giờ, hãy xem phần CSS để tạo kiểu cho HTML “ ” yếu tố. Kiểu div “text-div” Các ' .text-div ” được sử dụng để truy cập phần tử Phong cách “chớp nhoáng” đẳng cấp Các ' .nhấp nháy ” được sử dụng để truy cập các thẻ HTML . Các thuộc tính sau được thực hiện trong lớp này: Áp dụng “quy tắc @keyframe” cho hoạt ảnh “kiểu nhấp nháy” Điều chỉnh hành vi của “ kiểu nhấp nháy ” hoạt ảnh bằng cách sử dụng “ @keyframe ' quy tắc. Khi bắt đầu hoạt ảnh, độ mờ của văn bản sẽ bằng 0, biểu thị mức độ trong suốt hoàn toàn của các phần tử. Để tạo hoạt ảnh trên thứ hai “ ” phần tử hơi khác một chút, lớp “ một ” được khai báo với các kiểu hoạt hình sau: Phong cách “một” đẳng cấp đầu ra Chúng ta đã học được cách tạo văn bản nhấp nháy một cách hiệu quả bằng cách sử dụng các thuộc tính tạo kiểu CSS khác nhau. Trong HTML, một số thuộc tính CSS được sử dụng để tạo kiểu văn bản nhấp nháy. Các ' hoạt hình ' và ' độ mờ đục ” thuộc tính thường được định nghĩa trong ngữ cảnh này. Để điều chỉnh hành vi nhấp nháy, nút “ @keyframe ” quy tắc được khai báo cho thuộc tính hoạt hình. Bài viết này đã giải thích cách tạo văn bản nhấp nháy hoặc nhấp nháy trong HTML bằng cách sử dụng CSS.
< div tầng lớp = 'kiểu chớp mắt' >
< h3 > Linux h3 >
div >
nền: rgb ( 0 , 0 , 0 ) ;
}
căn chỉnh văn bản: trung tâm;
họ phông chữ: Verdana;
màu: #ffc310;
hình ảnh động: văn bản nhấp nháy 1,9 giây tuyến tính vô hạn;
cỡ chữ: 6em;
}
0 % {
độ mờ đục: 0 ;
}
năm mươi % {
độ mờ đục: một ;
}
100 % {
độ mờ đục: 0 ;
}
< P tầng lớp = 'nhấp nháy' > Lấp lánh P >
< P tầng lớp = 'nhấp nháy một' > Ngôi sao nhỏ * P >
div >
chiều rộng: 400px;
lề: xe hơi;
màu nền: rgb ( 42 , 49 , 49 ) ;
phần đệm: 8px;
}
màu vàng;
cỡ chữ: 40px;
họ phông chữ: chữ thảo;
trọng lượng phông chữ: đậm;
hình ảnh động: vô hạn tuyến tính 0,6 giây kiểu nhấp nháy;
}
0 % {
độ mờ đục: 0 ;
}
}
hình ảnh động: một 1s tuyến tính vô hạn;
}
@ khung hình chính một {
năm mươi % {
độ mờ đục: 0 ;
}
}
Phần kết luận