У попередні часи Інтернету такі елементи 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, можливостей практично немає.
- ? Слідуйте за мною у Twitter
- ? Підписатися на мій Youtube
- Підпишіться на мою розсилку