Używamy migającego tekstu, gdy chcemy zwrócić uwagę publiczności. Bardzo pomaga zwrócić uwagę użytkownika, gdy mamy ważne informacje lub jakąś nową aktualizację o czymkolwiek dla użytkownika. Używamy migającego tekstu, więc kiedy użytkownicy używają stron internetowych lub przechodzą przez dowolną stronę, na której chce uzyskać aktualiza tekst na tej stronie. Jak widzimy na stronach zakupowych, gdy na tej stronie jest jakaś sprzedaż, zniżka lub coś nowego. Wykonanie mrugnięcia tekstu z łatwością przyciągnie uwagę użytkownika na te informacje. Mruczący tekst to coś, co zanika powoli przez kilka sekund, a następnie wraca do oryginalnego tekstu. Wyjaśnimy, jak dodać migający tekst za pomocą CSS w tym samouczku.

Przykład 1

Aby nasz tekst mrugnął, musimy utworzyć plik HTML i napisać na nim tekst. Dodajemy efekt migania na ten tekst za pomocą właściwości CSS.

W kodzie HTML napisaliśmy pojedynczy wiersz w „Div” jako nagłówek „H2” i stosujemy właściwości CSS, aby ten tekst był migającym tekstem. Zobacz kod CSS poniżej, a będziesz wiedział, jak dodać efekt migania za pomocą właściwości CSS.

Kod CSS:

Ustawiamy ciało „margines” i „wyściółka” na „0”. Następnie używamy absolutnej pozycji środkowej w „Div”. Ustawiamy właściwość „pozycji” na „absolutne”. Ustawiliśmy „TOP” i „Left” na „50%”. Potem pojawia się właściwość „transformatyczna” CSS, która przekształca tekst z powrotem w połowę jego szerokości i wysokości. Służy do odwrócenia tekstu do „50%” z powrotem do połowy jego szerokości i „50%” z powrotem do połowy jego wysokości.

Następnie używamy właściwości stylizacji CSS, aby zmienić styl „H2”. Ustawiamy rozmiar czcionki „H2” na „5EM” i „rodzinę czcionki” na „Serif”. Kolor, który dla tego wybieramy, to kolor „zielony”, a kod to „#008000”. Ten nagłówek jest wyrównany w „środku”. Głównym elementem jest dodanie właściwości „animacji” do tego „H2”. Ta właściwość „animacji” jest ustawiona na „2.0Sec ”i„ Liniowy nieskończony ”. Liniowy nieskończony jest używany, więc animacja zaczyna się powoli, a następnie przekształca się w nieco szybciej. Selektor „@KeyFrame” służy do dostarczania migającego tekstu wraz z wartością krycia. Ustawiamy wartość krycia na końcu kodu CSS.

Wyjście:

Tekst jest pokazany na poniższym filmie. Po uruchomieniu poprzedniego kodu, zobaczysz, że tekst napisany w pliku HTML miga. Odtworzyć ten film i widać, że tekst miga.

Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/DOCOMUS-PROFILE-1-MICrosoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Przykład nr 2

Zamierzamy tutaj zademonstrować kolejny kod, aby łatwo poznać tę koncepcję migania tekstu w CSS.

Używamy tutaj klasy „Span” i ustawiamy nazwę na „miganie”. Piszemy tutaj prostą linię, która jest „Mrugam” i używamy efektu migania na tym tekście za pomocą właściwości animacji CSS.

Kod CSS:

Najpierw ustawiamy tekst na absolutną pozycję środkową, co oznacza, że ​​tekst pojawi się na środku ekranu. Tutaj widać, że „pozycja” jest „absolutna”. „U góry” i „dolne” są ustawione na „50%”, a właściwość „transformatyczna” jest ustawiona na „-50%, -50%”. Używamy nazwy klasy „Span”, która „miga”. I zastosuj styl i efekt „animacji” do tekstu. Ustawiamy „rozmiar czcionki” tego tekstu na „4EM”. „Rodzina czcionki”, której używamy do tego tekstu, jest ustawiona na „Algierskie”.

Kolor tekstu jest ustawiony na „zielony”. Wyrównanie tekstu jest ustawione na „środek” ekranu. Właściwość „Animacja” stosuje efekt migania do tekstu. Mruczący tekst animuje „2.0s ”i„ nieskończone ”. „@KeyFrames” ma nadać kolorowe krycie migającego tekstu. Najpierw ustaw go na „0%” i ​​„49%” dla koloru „czarnego”. „60%” jest ustawione na przezroczysty kolor, „99%” przezroczysty i „100%” czarny. Wyjście pokazano w poniższym filmie.

Wyjście:

W tym danym filmie zauważysz, że tekst mruga. To dane wyjście jest renderowane w przeglądarce. Mruczący tekst przyciąga uwagę użytkownika.

Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/DOCOMUS-PROFILE-1-MICrosoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Przykład nr 3

W tym przykładzie piszemy akapity w kodzie HTML i używamy właściwości „Animacja” w tych akapitach, aby akapity migają, gdy otrzymamy dane wyjściowe.

Tutaj mamy nagłówek 1 „

„Gdzie piszemy nagłówek, który chcemy wyświetlić. Następnie tworzymy jedną klasę o nazwie „A1” z „P” i piszemy w niej akapit. Ponadto tworzymy kolejny akapit przy użyciu nazwy klasy „A2” innego „P”. Podajemy te nazwy klasie „P”, abyśmy mogli użyć ich w kodzie CSS do stylizacji.

Kod CSS:

Najpierw stosujemy styl do nagłówka. Używamy koloru „pomarańczowego” do czcionki lub tekstu zapisanego wewnątrz nagłówka. Nagłówek jest „wyrównany” do „środka” ekranu wyjściowego. Rodzina tekstu lub czcionki jest ustawiona na „algierskie”, więc nagłówek będzie wyświetlany w stylu „algierskim”. Aniejemy tekst, aby akapity mrugają na ekranie. Używamy tej samej właściwości, której używamy w naszym poprzednim przykładzie, aby tekst mrugnął. Ta właściwość jest właściwością „animacji”. Animuje lub mruga dla „2s” (dwie sekundy).

Rozmiar tekstu w akapicie wynosi „25px”. Te akapity są zgodne z „centrum”. Tekst akapitu jest ustawiony na „kursywę”. Znowu mamy „@Keyframe”, który wyjaśniliśmy w naszych poprzednich przykładach. Spójrz na podane wideo, aby uzyskać dane wyjściowe tego przykładu.

Wyjście:

Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/DOCOMUS-PROFILE-1-MICrosoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

W poprzednim filmie widać, że tekst nagłówka nie miga, ponieważ nie użyliśmy efektu migającego ani właściwości animacji na nagłówku. Właśnie dlatego tekst nagłówka jest w stanie. Ale akapity poniżej mrugnięcia nagłówka i styl tych akapitów różnią się od nagłówka.

Wniosek

W tym samouczku wyjaśniliśmy efekt migania w CSS i zastosowaliśmy ten efekt migającego do naszego tekstu za pomocą właściwości CSS „Animation”. Ten migający tekst służy do zwrócenia uwagi użytkownika. Możesz zauważyć, że kiedy tekst mruga, nasze oczy automatycznie zmierzają w kierunku tego tekstu. W tym samouczku przedstawiliśmy filmy o migającym tekście. Po obejrzeniu tych wyników wideo zrozumiesz, co oznaczają mrugnięcia. Dowiesz się, jak mruga tekst i jak korzystamy z właściwości „animacji”, i ustawiamy czas migania w tekście, aby tekst migał po dokładnym badaniu tego samouczka.