Jak zrobić migający/migający tekst za pomocą CSS

Tworząc aplikację internetową, programiści zawsze mają tendencję do efektywnego wdrażania właściwości stylów CSS. CSS zapewnia kilka właściwości stylizacyjnych, takich jak kolor, położenie, wyrównanie i wiele innych. Oprócz tych właściwości pozwala nam ustawić akcję animacji na elementach. W tym celu „ @klatka kluczowa s będą stosowane zasady.

W tym artykule zademonstrujemy, jak możemy tworzyć migający/migający tekst za pomocą CSS.

Jak zrobić migający tekst za pomocą CSS?

Aby tekst migał, CSS „ nieprzezroczystość ” obiekt z „ @klatki kluczowe można zastosować regułę ”. Sprawdź poniższe przykłady.

Przykład 1: Utwórz migający tekst

W HTML dodaj „ ” i przypisz mu „ styl migania ' klasa. Następnie dodaj „

”, aby określić nagłówek między elementem div:

---

---

< dz klasa = „w stylu mrugnięcia” >
< h3 > Linuks h3 >
dz >

Przejdźmy do stylizacji elementów HTML.

Styl div „w stylu migania”.

styl mrugnięcia {
tło: rgb ( 0 , 0 , 0 ) ;
}

CSS” tło ” właściwość jest stosowana do elementu div z klasą „ styl migania ”.

Element stylu „h3”.

h3 {
wyrównanie tekstu: środek;
rodzina czcionek: Verdana;
kolor: #ffc310;
animacja: migający tekst 1,9 s liniowy nieskończony;
rozmiar czcionki: 6em;
}

Kod HTML „

” jest ozdobiony następującymi właściwościami CSS:

• “ wyrównanie tekstu ” ustawia wyrównanie tekstu elementu.
• “ rodzina czcionek ” określa styl czcionki dla tekstu.
• “ kolor ” służy do kolorowania tekstu elementu.
• “ animacja ” to skrócona właściwość, która określa nazwę animacji, czas trwania animacji, funkcję synchronizacji animacji i wartości właściwości liczby iteracji animacji.
• “ rozmiar czcionki ” dostosowuje rozmiar czcionki głównie w jednostkach „px” i „em”.

Zastosuj „regułę @keyframe” do animacji „migającego tekstu”.

@ migające klatki kluczowe {
0 % {
nieprzezroczystość: 0 ;
}
pięćdziesiąt % {
nieprzezroczystość: jeden ;
}
100 % {
nieprzezroczystość: 0 ;
}

Nazwa animacji „ migający tekst ” jest określony we właściwości animacji. „ @klatka kluczowa ” jest dodawana przed nazwą animacji, która oznacza zachowanie animacji w różnych odstępach czasu, jak wspomniano poniżej:

• Na ' 0% ”, krycie tekstu jest ustawione na 0.
• Na ' pięćdziesiąt% ”, krycie tekstu jest ustawione na 1.
• Na ' 100% ”, krycie tekstu jest ustawione na 0.

Wyjście

Przykład 2: Tworzenie wielu migających tekstów

Aby utworzyć wiele migających tekstów w kodzie HTML, wykonaj poniższe czynności:

• Najpierw umieść „ ” element i przypisać mu klasę „ tekst-div ”.
• Następnie dodaj dwa „

  ”, aby zawierały trochę tekstu.

• Pierwszemu elementowi „

  ” przypisano klasę „ błyskowy ”.

• Drugiemu przypisano dwie klasy, „ błyskowy ' oraz ' jeden ”. Obie klasy są dostępne w CSS w celu zadeklarowania właściwości stylizacji:

< dz klasa = 'tekst-div' >
< p klasa = 'błyskowy' > Migocz migocz p >
< p klasa = „miga jeden” > Mała gwiazda * p >
dz >

Teraz sprawdź sekcję CSS, aby stylizować kod HTML „

' elementy.

Styl div „text-div”.

.text-div {
szerokość: 400 pikseli;
margines: samochód;
kolor tła: rgb ( 42 , 49 , 49 ) ;
wypełnienie: 8px;
}

„ .text-div ” służy do uzyskiwania dostępu do elementu

. W nawiasach klamrowych następujące właściwości CSS są stosowane do „.text-div”:

• “ szerokość ” dostosowuje szerokość elementu.
• “ margines ” dodaje przestrzeń wokół elementu.
• “ kolor tła ” ustawia kolor tła.
• “ wyściółka ” tworzy przestrzeń w granicach elementu.

Styl „miga” klasa

.błyskowy {
kolor żółty;
rozmiar czcionki: 40px;
rodzina czcionek: kursywa;
grubość czcionki: pogrubiona;
animacja: liniowa nieskończona w stylu migania 0,6 s;
}

„ .błyskowy ” służy do uzyskiwania dostępu do znaczników HTML

. W tej klasie zaimplementowane są następujące właściwości:

• “ grubość czcionki ” oznacza grubość czcionki.
• Inne właściwości zostały wyjaśnione w powyższej sekcji.

Zastosuj „regułę @keyframe” do animacji „w stylu flashowania”.

@ migające klatki kluczowe {
0 % {
nieprzezroczystość: 0 ;
}
}

Dostosuj zachowanie „ migający styl ” animacja z wykorzystaniem „ @klatka kluczowa ' zasady. Na początku animacji krycie tekstu będzie równe 0, co wskazuje na całkowity poziom przezroczystości elementów.

Aby zrobić animację na drugim „

” element nieco inny, klasa „ jeden ” jest zadeklarowany z następującymi stylami animacji:

Styl „jednej” klasy

.jeden {
animacja: jedna 1s liniowa nieskończoność;
}
@ klatki kluczowe jeden {
pięćdziesiąt % {
nieprzezroczystość: 0 ;
}
}

Wyjście

Skutecznie nauczyliśmy się, jak tworzyć migający tekst przy użyciu różnych właściwości stylizacyjnych CSS.

Wniosek

W HTML kilka właściwości CSS jest używanych do migania stylu tekstu. „ animacja ' oraz ' nieprzezroczystość ” właściwości są powszechnie definiowane w tym kontekście. Aby dostosować sposób migania, przycisk „ @klatka kluczowa ” jest zadeklarowana dla właściwości animacji. W tym artykule wyjaśniono, jak zrobić migający lub migający tekst w HTML za pomocą CSS.