Készítsen animált aláhúzás linkek
Nemrég érdekelt egy egyszerű vizuális hatás: amikor az egérmutató aláhúzás jelenik meg a központtól segítségével animációt. Készítsen egy ilyen hatás meglepően egyszerű, nem igényel hozzáadásával extra DOM elemek a HTML kódot, és a régebbi böngészők, amelyek nem támogatják a CSS animációk, akkor meg normális, mint rendesen kiemelése. Láthatjuk ezt a hatást az alábbiakban.
Ezt követően egy olyan keretet, és elrejti azt az átalakulást. Ezt úgy tesszük, hogy ezek a tulajdonságok pszeudoelem: before és beállított értékek skála X tengely 0. Megoldásként elrejteni ezeket a tulajdonságokat keresztül láthatóság: rejtett böngészők nem támogatják az animációt CSS:
A végén a pont minden élő eleme a vele szemben alkalmazott értékét megváltoztatja időtartama 0,3 másodperc. Most, hogy az animáció van, akkor csak meg kell tenni az elemet újra láthatóvá, ha az egérmutatót, és a skála tengely az X értéke 1:
És ennyi az egész! Mindenesetre, egy bemutató a bal-top box gyártók régebbi verziói Firefox és az Opera, de ha nem kell, hogy támogassa a régebbi verziók, csak használni a tulajdon nélküli elő- és előtaggal termelő gyártó -webkit, mind a CSS kódot a szövegben a leckét.
Translation - Dezhurko