Make Blink HTML oktatóanyag - A Blink címke használata kódpéldákkal

A web korábbi napjaiban a HTML elemek, például a blink címke, natív módon adtak hozzá animációs effektusokat a weboldal élénkítéséhez. Hogyan használhatjuk ma ezeket az animációkat, hogy fellángolást adjunk webhelyeinknek és alkalmazásainknak?

  • Mi a villogó HTML-címke?
  • Hogyan használja a villogó címkét?
  • Használhatja továbbra is a villogó címkét?
  • A villogó címke újrateremtése CSS-animációkkal

Mi a villogó HTML-címke?

A blink tag ( ) egy elavult HTML címke, amely lassan felvillantja a címke tartalmát.

Ez, valamint néhány más elavult címke, például a sátor tag ( ), egyszerű módja volt annak, hogy egyszerű animációs effektusokat adjon a webhelyéhez.

Hogyan használja a villogó címkét?

Mivel a blink címke egyszerű HTML elem volt, akkor azt közvetlenül a tartalmával összhangban használná.

Például, ha azt szeretné, hogy a blink-182 villogjon, akkor a következő HTML-t írja:

blink-182

Használhatja továbbra is a villogó címkét?

Amint a fenti gif-ben észrevehette, ez a címke elavult.

Ez azt jelenti, hogy nem használhatja magát a villogó HTML címkét. Ez azonban nem akadályozhat meg bennünket abban, hogy teljes villogó dicsőségében átdolgozzuk.

Megjegyzés: A Blink címkét a kisegítő lehetőségek miatt elavultuk. Kérjük, végezze el a kutatását, mielőtt megpróbálja használni az azonos hatást biztosító megoldást, mivel mindannyiunknak arra kell törekednünk, hogy projektjeink a lehető legfogóbbá váljanak.

A villogó címke újrateremtése CSS-animációkkal

A mai webfejlesztési világban az animációkat általában CSS vagy JavaScript segítségével kezelik. A CSS-animációk segítségével néhány sorral újra létrehozhatjuk a pislogás címkét, és visszatérhetünk az üzleti életbe.

A következő CSS-sel:

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

Hozzáadhatja az .blinkosztályt bármely HTML elemhez, hogy villogjon.

blink-182

A villogó címke korszerűsítése

Ez 2020, mi lenne, ha valami simábbra vágynánk?

Először is, az animációt elhalványíthatjuk, ha eltávolítjuk stepsa animációt az animáció definícióiból.

.blink { animation: blink 1s infinite; } 

Vagy mi lenne, ha azt akarnánk elhalványítani, mint egy sci-fi effekt?

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

Vagy akár egy szép növekedési és fakulási hatás.

.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; } } 

Az animációk irányítása CSS-sel

Lehet, hogy nem tudja használni a villogó címkét, de mégis sok lehetősége van. A CSS rengeteg animációs lehetőséget kínál natív módon, így akár a kedvenc HTML időtöltésedet, akár az Alien címsorrendet akarod létrehozni, a lehetőségek gyakorlatilag végtelenek.

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? ️ Iratkozzon fel a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre