Зробіть його блимаючим Підручник HTML - Як використовувати тег блимання, на прикладах коду

У попередні часи Інтернету такі елементи HTML, як тег блимання, були рідними способами додати деякі ефекти анімації, щоб оживити веб-сторінку. Як ми можемо використовувати ці анімації сьогодні, щоб додати спалах на наші веб-сайти та програми?

  • Що таке блимання тегу HTML?
  • Як ви використовуєте тег блимання?
  • Ви все ще можете використовувати тег блимання?
  • Відновлення блимаючого тегу з анімацією CSS

Що таке блимання тегу HTML?

Тег блимання ( ) - застарілий HTML-тег, завдяки якому вміст цього тегу повільно миготить.

Це, поряд з деякими іншими застарілими тегами, такими як тег marquee ( ), було простим способом додати прості ефекти анімації на ваш сайт.

Як ви використовуєте тег блимання?

Оскільки тег блимання був простим елементом 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 та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку