Make It Blink HTML Урок - Как да използвам тага за мигане, с примери за кодове

В по-ранните дни на мрежата HTML елементи като мигащ таг бяха естествени начини за добавяне на някои анимационни ефекти за оживяване на уеб страница. Как можем да използваме тези анимации днес, за да добавим сигнали към нашите уебсайтове и приложения?

  • Какво представлява мигането на HTML тагове?
  • Как използвате тага за мигане?
  • Все още можете ли да използвате тага за мигане?
  • Пресъздаване на тага за мигане с CSS анимации

Какво представлява мигането на HTML тагове?

Тагът за мигане ( ) е остарял HTML таг, който кара съдържанието на този таг бавно да мига.

Това, заедно с някои други остарели маркери като маркера за маркиране ( ), бяха лесен начин за добавяне на прости анимационни ефекти към вашия сайт.

Как използвате тага за мигане?

Тъй като тагът за мигане е прост HTML елемент, ще го използвате точно в съответствие със съдържанието си.

Например, ако искате думата "мига" в blink-182 да мига, бихте написали следния HTML:

blink-182

Все още можете ли да използвате тага за мигане?

Както може би сте забелязали в gif по-горе, този маркер е остарял.

Това означава, че не можете да използвате самия мигащ HTML таг. Това обаче не трябва да ни спира да го преправяме в цялата му мигаща слава.

Забележка: тагът Blink е остарял поради опасения за достъпност. Моля, направете проучване, преди да се опитате да използвате решение, което осигурява същия ефект, тъй като всички ние трябва да положим усилия, за да направим нашите проекти възможно най-приобщаващи.

Пресъздаване на тага за мигане с CSS анимации

В днешния свят за уеб разработки анимациите обикновено се обработват с CSS или JavaScript. Използвайки CSS анимации, можем да пресъздадем нашия мигащ маркер с няколко реда и да се върнем в бизнеса.

Със следния CSS:

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

Можете да добавите .blinkкласа към всеки HTML елемент, за да мига.

blink-182

Модернизиране на тага за мигане

Това е 2020 г. Ами ако искаме нещо малко по-гладко?

Е, за начало можем да накараме анимацията да избледнее, като премахнем stepsот дефинициите на анимацията.

.blink { animation: blink 1s infinite; } 

Или какво, ако искахме да го накараме да избледнее като научно-фантастичен ефект?

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

Или дори приятен ефект на растеж и избледняване.

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 

Поемане на контрол над анимациите с CSS

Въпреки че може да не успеете да използвате мигащия таг, все още имате много опции. CSS предлага много опции за анимация, така че независимо дали искате да пресъздадете любимото си HTML забавление или да създадете последователността на заглавието Alien, възможностите са практически безкрайни.

Последвайте ме за още Javascript, UX и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? ️ Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин