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övess a Twitteren
- ? ️ Iratkozzon fel a Youtube-ra
- ✉️ Iratkozzon fel a hírlevelemre