Növekvő háttérképeket
Nemrég dolgoztam egy ügyfél telephelyén, és megkért, hogy ilyen hatást fejtsen ki. Ez a hatás gyakran használják a portfólió oldal, ahol a helyszínen kell mutatni a vizuális és információs összetevőket. Sok különböző módszerekkel. Soha nem tenne ilyet tett. Elkezdtem keresni, és találtam néhány különböző módszerekkel.
Az első módszer használatával jár jQuery plugin. Nem egészen a hatás kerestem. Ezen túlmenően, a plug-in a nagy tömeg.
Egy másik módja az volt -, hogy az img tag a tartályba, és manipulálni a képet a CSS segítségével. Itt megvan a maga előnye: megadhatja a forrást srcset tulajdonság, amely betölti a megfelelő képet, egy adott eszköz.
Az én esetemben, azt akartam, hogy ellenőrizzék a hatása a zoom végig CSS, ezért választottam a második utat.
az alapvető funkciókat
Az optimális teljesítmény érdekében, úgy döntött, hogy a transzformációs ingatlan a képre. Így megkapjuk a CSS-animációk hardveres gyorsítást, így simább.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Ehelyett vettem img tag div tag, és tedd egy tartályban. Ez az egység volt, hogy szimulálja az img tag. szerkezete:
Először is, meg kell adnia a méret a szülő elem. Gyermek elemek töltse szülői egység segítségével tulajdonságok szélesség: 100%, és a magasság: 100%;. Arra is szükség van, hogy a háttérképet, hogy bezárja a 100% block.
Ezután adjuk hozzá a hover hatása a szülői egység. Ez a hatás befolyásolja a gyermek eleme. Az ál fókusz jó megközelíthetőség:
A maximális támogatás böngészők, akkor egy speciális eszköz segítségével adja hozzá az eladó változat előtagot. Záró mi bázishatás, akkor adjunk hozzá egy kis sima átmenet a normális állapot a gyermek elem:
Hozzáadni felső réteget egy bizonyos színt lehet használni pszeudo típusát. előtt:
Ha most mozgatni az egeret a szülői egység, a tetején a gyermek eleme a színes réteg jelenjen meg! Végül nézzük meg, hogyan kell hozzá szöveget, hogy a felső réteget. A mi leányvállalata egység egy új elem:
Span tag, akkor meg egy pár stílus:
A szöveg csak akkor jelenik meg, ha lebeg a kurzort a blokk .PARENT:
Mobileszközök támogatása
Ha a konténerek készülnek a hivatkozások formájában, és lebeg állam nem végez hasznos információt, akkor hagyni mindent csak úgy.
Szerkesztőség: Dylan Winn-Brown
Felülvizsgálat: Team webformyself.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
