Jak zrobić migający/migający tekst z CSS
Podczas opracowywania aplikacji internetowej programiści zawsze mają tendencję do skutecznego wdrażania właściwości stylizacji CSS. CSS zapewnia kilka właściwości stylizacji, takich jak kolor, pozycja, wyrównania i wiele innych. Oprócz tych właściwości pozwala nam ustawić akcję animacji na elementach. W tym celu „@KeyframeS„Zasady będą używane.
W tym artykule pokaże, w jaki sposób możemy sprawić, że migający/migający tekst z CSS.
Jak zrobić migający tekst z CSS?
Aby tekst mrugnął, CSS „nieprzezroczystość„Nieruchomość z„@Keyframes„Można zastosować zasadę. Sprawdź poniższe przykłady.
Przykład 1: Utwórz migające tekst
W HTML dodaj „„Element i przypisz go„W stylu mrugnięcia" klasa. Następnie dodaj „ Linuxhint Przejdźmy do stylizacji elementów HTML. Styl „w stylu mrugnięcia” div CSS „tło„Własność jest stosowana do elementu DIV w klasie”W stylu mrugnięcia". Element stylu „H3” HTML " Zastosuj regułę „@Keyframe” do animacji „Blink-Text” Nazwa animacji „Tekst mrugnięcia”Jest określony w właściwości animacji. „„@Keyframe”Reguła jest dodawana przed nazwą animacji, która oznacza zachowanie animacji w różnych odstępach czasu, jak wspomniano poniżej: Wyjście Przykład 2: Wykonanie wielu mrugających tekstów Aby wykonać wiele migających tekstów w HTML, wykonaj kroki poniżej: „Element jest przypisany do klasy”błyskowy". Migocz migocz Mała gwiazda * Teraz sprawdź sekcję CSS, aby stylizować HTML ” Styl „Text-Div” Div „„.Text-Div”Służy do dostępu do elementu. W nawiasach kręconych do „do„ do „.Text-Div ”: Styl „Flashing” klasa „„.błyskowy”Służy do dostępu do HTML tagi. W tej klasie zaimplementowane są następujące właściwości: Zastosuj regułę „@Keyframe” do animacji „Flashing Style” Dostosuj zachowanie „Flashing w stylu„Animacja za pomocą„@Keyframe" zasady. Na początku animacji krycie tekstu wyniesie 0, wskazując na pełny poziom przejrzystości elementów. Aby zrobić animację drugiego „„Element nieco inny, klasa”jeden”Jest zadeklarowane następującymi stylami animacji: Style „One” klasa Wyjście Skutecznie nauczyliśmy się tworzyć migający tekst za pomocą różnych właściwości stylizacji CSS. Wniosek W HTML wykorzystywane jest kilka właściwości CSS, aby styl tekstowy migał. „„animacja" I "nieprzezroczystość”W tym kontekście właściwości są powszechnie definiowane. Aby dostosować migające zachowanie, „@Keyframe„Zasada jest zadeklarowana dla właściwości animacji. W tym artykule wyjaśniono, jak sprawić, że migający lub migający tekst w HTML za pomocą CSS. .w stylu mrugnięcia
Tło: RGB (0, 0, 0);H3
Text-Align: Center;
Font-Family: Verdana;
Kolor: #FFC310;
Animacja: Blink-Text 1.9s liniowy nieskończony;
Rozmiar czcionki: 6em;
@Keyframes Blink-Text
0%
Krycie: 0;
50%
Krycie: 1;
100%
Krycie: 0;
.Text-Div
szerokość: 400px;
Margines: Auto;
kolor tła: RGB (42, 49, 49);
Wyściółka: 8px;
.Flashowanie
kolor żółty;
Rozmiar czcionki: 40px;
FONT-FAMILY: Kursywna;
Font-Weight: Bold;
Animacja: flashing w stylu 0.6s liniowy nieskończony;
@Keyframes Flashing w stylu
0%
Krycie: 0;.jeden
Animacja: jedna liniowa liniowa nieskończona;
@Keyframes One
50%
Krycie: 0;