Sima animáció tárgyak csak CSS-en keresztül (5. példa)
Szia kedves blog olvasók. Ezen a napon, beszéljünk, szép, érdekes dolgok, mint a CSS-animációk. Ez azt jelenti, ez az animáció elem mindig csak a segítségével stílusok és nem script nem használható.
Talán, ha a CSS-animációk helyére mindenféle scriptek és pluginek JQuery. de ez lesz, mint amennyire nem hamar, mert még mindig nagyon korlátozott kapacitása, míg jQuery szkriptek végtelenek.
Az egyetlen negatív az, hogy néhány régi (nem frissül) böngészők nem támogatják ezt a módszert, és az IE (Internet Explorer), én általában hallgatnak. De dolgozik egy bumm, különösen akkor, ha speciális előtagot általában ez az animáció a legnépszerűbb böngésző.
Apropó előtagok fogjuk használni őket minden esetben, hogy úgy mondjam, meg kell biztosítottnak:
- -o- - az Opera böngésző;
- -moz- - Firefox;
- -webkit- - Google Chrome és a Safari.
Most nézzük az összes nézze meg közelebbről.
Ebben az esetben fogunk létrehozni a leggyakoribb egység felbontása 200 100 pixel, majd csatolja az animációt.
normál blokk
Ahhoz, hogy hozzá egy egységet arra az oldalra, csak kell hozzá
#box margin-bottom: 5px;
background-color: #ccc;
color: # 333;
padding: 10px;
text-align: center;
szélesség: 200px;
magasság: 100px;
border: 1px szilárd # 888;
kurzor: pointer;
>
#box: hover background-color: # 97CE68;
color: # 000;
>
Mint látható, itt van egy attribútum: hover. amely megváltoztatja a háttérben stílust lebeg, bizonyos esetekben kötelezővé kellene tenni.
Sima színe megváltozik, amikor mutatva tagja átállás útján
padding: 10px;
text-align: center;
szélesség: 200px;
magasság: 100px;
text-indent: 0px;
border: 1px szilárd # 888;
-moz-átmenet: background-color 0.8s 0.1s könnyű;
-o-átmenet: background-color 0.8s 0.1s könnyű;
-WebKit-átmenet: background-color 0.8s 0.1s könnyű;
kurzor: pointer;>
Mint látható ez az animáció, elértük a segítségével átmenet attribútumot. Meg lehet változtatni a sebességet az animáció másodpercben, ebben az esetben érdemes 0.8s befejezni a színe megváltozik, ha mozog, és 0,1 mp előtt animációs munka után mutatva a kurzort, és visszahúzódni. (Elnézést a puzzle :-)) Ez az érték lehet változtatni, ahogy kell.
A háttér színe, ha lebeg attribútum kerül: hover. ez kötelező, különben az animáció nem fog működni.
Méretének változtatása egy elem
text-indent: 0px;
border: 1px szilárd # 888;
-moz-átmenet: minden 1s lineáris;
-o-átmenet: minden 1s lineáris;
-WebKit-átmenet: minden 1s lineáris;
kurzor: pointer;>
Ebben a példában, tettünk egy sima változás a blokk méretét, ha lebeg. A normál érték 200-100, és Hover érték 150-ről 50, amely úgy definiálható attribútum: hover.
További itt meg lehet változtatni a készülék csak a szélességét vagy magasságát, ha csak szükség: hover eltávolítása szélesség: - a blokk változtatni csak magasság, magasság: - egy blokk változások csak széles.
Azt is megváltoztathatja a gyors változás. Ebben az esetben az 1c.
torziós objektum
padding: 10px;
text-align: center;
szélesség: 200px;
magasság: 100px;
text-indent: 0px;
border: 1px szilárd # 888;
-moz-átmenet: minden 1s 0,1 s könnyű-in;
-o-átmenet: minden 1s 0,1 s könnyű-in;
-WebKit-átmenet: minden 1s 0,1 s könnyű-in;
kurzor: pointer;>
# Box3: hover background-color: # 97CE68;
color: # 000;
-WebKit-transzformáció: Forgatás (360deg);
-moz-transzformáció: Forgatás (360deg);
-o-transzformáció: Forgatás (360deg);
>
Torziós történik, és átalakítja keresztül átmenetet. Ebben az esetben a tárgy csavart óramutató járásával megegyező irányban 360 fokkal sebességgel egy másodperc. Ha azt szeretnénk, hogy blokkolja forog az óramutató járásával ellentétesen, abban az értelemben, ki kell alakítani a transzformáció - (mínusz). Természetesen meg lehet változtatni a mértéke a forgalom.
Fokozatos növekedés és csökkenés a tárgy
# Box4 margin-bottom: 5px;
background-color: #ccc;
color: # 333;
padding: 10px;
text-align: center;
szélesség: 200px;
magasság: 100px;
text-indent: 0px;
border: 1px szilárd # 888;
-moz-átmenet: minden 3s könnyű ki;
-o-átmenet: minden 3s könnyű ki;
-WebKit-átmenet: minden 3s könnyű ki;
kurzor: pointer;>
Ebben a példában, a simán nőtt 2 alkalommal. Ezt az értéket a transzformáció: skála (2). Ha tesz egy értéket 1,5, illetve nőtt a blokk lesz 1,5-szerese.
Ugyanez a módszer csökkenti a blokk méretét, például, hogy egy érték 0,5.
Sima lefelé váltás egység
# Box5 margin-bottom: 5px;
background-color: #ccc;
color: # 333;
padding: 10px;
text-align: center;
szélesség: 200px;
magasság: 100px;
text-indent: 0px;
border: 1px szilárd # 888;
-moz-átmenet: minden 1s enyhíteni-in-out;
-o-átmenet: minden 1s enyhíteni-in-out;
-WebKit-átmenet: minden 1s enyhíteni-in-out;
kurzor: pointer;>
# Box5: hover background-color: # 97CE68;
color: # 000;
-WebKit-transzformáció: lefordítani (0,50px);
-moz-transzformáció: lefordítani (0,50px);
-o-transzformáció: lefordítani (0,50px);
>
Itt a mozgást meghatározott pixel. Ebben az esetben (0,50px). Azt is, hogy egy blokk felmászni ez az érték 0, -50px. Vagy átlósan lefelé 50px, 50px. Egy szóval egység lehet mozgatni sehova.
Ez alapvetően amire akartam mondani. Nem, nem minden :-) elfelejtettem emlékeztetni arra, hogy a CSS-animációk lehet alkalmazni minden olyan tárgy a helyszínen: a képeket, szöveget, fejlécek, ikonok, stb Itt vannak a linkek a tökéletes sima színváltozás, az én nagyon szép. -)
És mégis, ez az információ megosztott velünk shpargalkablog.ru oldalon. Mert hogy ő nagyon köszönöm.
Most pontosan minden :-) Viszlát, barátok.
Ez nem az óramutató járásával megegyező, a háttérben a tekercseket. Az ikonok a Sprite. Ha megváltoztatja a background-position és használata átmenet megkönnyítése - gördül a háttérben, ha lebeg. Azt kell, hogy a változó background-position - scroll, hogy az új helyzetben a háttér nem történik, és ez volt a zavartalan színes ikonok mondani №1 -> ikonra №1: hover.
Rájöttem, a láblécben az ilyesmit az átmenetet fényelnyelés. De kellett feláldozni átláthatósága 50%. És a hatás.
Eredetileg az átláthatóság nem lehet megváltoztatni a ikon a menüben. Tehát úgy gondolom -, mi lenne. Ez természetesen lehetséges, anélkül, animációs -, de ez nem igazán valahogy. És minden backgroun helyzetben felírni az átláthatóság - ez 24 szabályokat. Csak uzhs ugyanaz)
Így csak azért, hogy az ikon helyettesíti egymást, ahogy általában lenni szokott a CSS, és beletesszük az osztály ikon az eredeti átmenet:
Sprite távolítsa el és 12 egyedi ikonok csinálni? (0_0) I | I
Akkor ne használja az átmenet. és használjon egy script, hogy megcsináljuk, de a forgatókönyvet, nem tudok segíteni.
És igen, köszönöm a gyors választ! Ez nagyon jó! ))
A box2: hover egy fix magassága pixelben, nem autók
Egy kis valamit. Jelentése éppen az a tény, hogy nem egy fix magasság: hover magasságát a tartalomtól függően. Úgy tűnik, ez egyszerűen lehetetlen végrehajtani kizárólag css. Azt hiszem, csak használja egy másik megoldást.
Köszönöm.
Valószínűleg csak a CSS ez nem történik meg. Örültem, hogy segítsen, de ez sem segített. )
„Fokozatos növekedés vagy csökkenés az objektum”
Meg kell jegyezni, hogy be lehet állítani nem csak egész értékek, valamint a finomhangolás, az értékek századdal.
Például:
-WebKit-transzformáció: skála (1,05);
-moz-transzformáció: skála (1,05);
-o-transzformáció: skála (1,05);
Ha az értékek az elemek CSS meghatározott nullánál kisebb, akkor sül el.
például:
-WebKit-transzformáció: skála (0,5);
-moz-transzformáció: skála (0,5);
-o-transzformáció: skála (0,5);