13 Gyönyörű CSS effektek a képekhez, Kostanovich Stepan blogja
13 gyönyörű CSS effektus a képekhez
- zökkenőmentesen kinagyol és kicsinyít;
- Függőlegesen és vízszintesen mozgatja a képeket;
- dönthető vagy forgatható;
- kerek ki képeket;
És az ilyen hatásokat is:
- Blur, lightening, kontraszt, szépia;
- sima átmenet a színes képről fekete-fehérre;
- színes inverzió.
A kód használatához először csak a fő kódot kell átmásolni, majd a hatást kódot beilleszteni és természetesen beilleszteni a blogodra vagy a webhelyedre.
Fő kód
Ez a kód az összes olyan hatásra vonatkozik, amelyet tovább ajánlunk Önnek:
A ".pic" osztály minden stílusa közös lesz minden kép számára. Minden képhez egy fehér kocka van 10px-ban (sorszám: 13). Ugyanazok a képméretek a magasság és a szélesség 300px-nél jelennek meg (15. sor, # 16). 20 px blokkból való behúzás (sorszám: 17). A kép nem haladja meg a megadott melléktermékeket, írjuk a "túlcsordulás: rejtett; ”. Ha mindez nem egyértelmű, akkor nagyon ajánlom a CSS alapjainak olvasását.
Folytassa a hatásokat.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:2. sorszám. adja meg a kép elérési útját, amelynek mérete 400 x 400 képpont.
CSS-be illessze be ezt a kódot:
A kép lényegében 400 x 400 képpont, de csökkenteni fogjuk a 300x300 képpontos blokkunkat (3. és 4. sor).
A kép simán változik a 400 x 400px eredeti képhez (14. és 15. sor). A sima átméretezéshez az átmenet tulajdonsága. ahol 1 másodperc van feltüntetve. (No. 6 - 10. sor).
Valójában ez ugyanaz a kód, csak akkor kell változtatni a méret és a kép simán nagy méret 400 x 400 képpont, hogy csökkenjen a 300 x 300 képpont.
A HTML-ben egy fájl a címkék között
illessze be ezt a kódot itt:CSS-be illessze be ezt a kódot:
3. A "vízszintes elmozdulás"
Ez a hatás megváltoztatja a blokk pozícióját. Vagyis, ha a kurzort a kép felett mozgatja, akkor a kép oldalra változik.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:A 2. sorban adja meg a kép elérési útját, amelynek mérete 600 x 300 képpont.
CSS-be illessze be ezt a kódot:
A kép elmozdulása balra, adja meg az "-200" értéket a "margin-left" tulajdonságban. Ha az érték "200", az eltolás a jobb oldalon lesz.
4. "Függőleges eltolás" effektus
Valójában ez ugyanaz a kód, csak a "margó-bal" tulajdonság helyett "margin-top" értéket kell beállítania, és a kép simán mozog a kurzor felett.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Ha a "margin-top" tulajdonságokban megadja a "200" értéket, a kép lefelé fog eltolódni.
Ezzel a hatással a kép kis fordulata lesz, amikor az egér fölé húzza.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
A kurzor mozgatásakor a kép balra fordul 10 0-ra (11-es sorszám: No.15). Megnövelheti a forgás mértékét.
6. A "Kép elforgatása alakváltozással"
Ez a kedvenc effekt. Ha az egérmutatót a kép felett mozgatja, akkor egy körforgót hoz létre, míg a négyzet alakja egy kör alakúvá válik.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
A sarkok kerekítéséhez "határ-sugarú", "50%" értékkel válaszol.
A kép forgatásához 360 0-nak felel meg a tulajdonság átalakítása.
7. A "Kép fókusz" hatása
Ebben a tekintetben nincs semmi szokatlan, csak lekerekítve a képet és növelve a keret vastagságát.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Itt úgy gondolom, mindannyian értitek: a határ a határ és a határ sugarának vastagságáért a görbület sugara miatt.
Ha az egérmutatót tiszta kép fölé helyezi, elmosódottá válik.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Az elmosódás miatt a "webkit-filter: blur" tulajdonság megfelel az 5px paramétereknek.
9. Hatás "Fekete-fehér kép"
Amikor az egérmutatót a színes kép fölé helyezi, azonnal fekete-fehérré válik.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Mennyit kell egy fekete-fehér képnek megfelelni a "100% -os" értékű "webkit-szűrő: szürkeárnyalatos" szűrőnek. Megadhatja a saját értékét 1% -100% között.
A sötétített kép, amikor az egérmutató fölé mutat, fényesebbé válik.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Kezdetben eltakarja a képet "10%" -ra (sor száma 3)
Amikor az egérmutatót lenyomja, a képet "100%" -ra világosítja (sorszám: 12)
Szintén nagyon jó hatás, amelynek segítségével a kép szépi tónusgá válik.
HTML formátumban illessze be a fájlt a címkék közé
CSS-be illessze be ezt a kódot:
12. A "Kontraszt"
Azt hiszem, már a név is azt mondja, hogy amikor a kurzor képet fölé rakod, a kép telített lesz és több kontraszt lesz.
HTML formátumban illessze be a fájlt a címkék közé
CSS-be illessze be ezt a kódot:
Ügyeljen a 11-es sorra. Ha megadja a "100%" értéket, a módosítások nem fognak megjelenni. Ha a "100%", például "185%" értéket elérő százalékos arány a kontraszt lesz. Ha a százalék kisebb mint "100%", például "60%", akkor a kép elhalványul.
13. Az "Inversion"
Ez az egyik kedvenc effekt. Valahogy a "fém" úgy néz ki.
HTML formátumban illessze be a fájlt a címkék közé
itt van ez a kód:CSS-be illessze be ezt a kódot:
Az inverzió értéke 0% és 100% között van (11. Sor).