Hogyan lehet szép hatások referencia CSS3, azaz a sima színe megváltozik, ha mozog, és
Üdvözlet, kedves olvasók beloweb.ru blog. Ezen a napon azt akarom mondani, hogy hogyan lehet egy pár szép, de nagyon egyszerű hatások linkeket a honlapon. Nevezetesen, fokozatos változás színe, ha lebeg és sima váltás a referencia szöveg. Általában kiderül szépen. Sőt, gyakran látni ezeket a hatásokat különböző helyszíneken.
Miért van ez az egyszerű módszer? Mivel ez csak a segítségével CSS. Nincsenek szkriptek csak stílusokat.
Nos, drága barátaim, kezdjük.
Sima színváltozást, ha lebeg
Alapértelmezésben érdemes 0,2 másodperc, amikor a kurzort, és 0,02 másodpercig bevétele után. Más szóval, itt kiállított animáció sebességét. Ez az érték lehet változtatni, ahogy tetszik, ők a példa.
Az osztályban a: hover link színe van beállítva, ami fokozatosan jelennek meg, ha lebeg felette. Az alapértelmezett beállítás a szín # 1FA2E1.
Egy hivatkozást egy oldalon (vagy más színű)
Ahhoz, hogy ezt a hatást CSS, hogy egy hivatkozás arra a helyre, meg kell adnia egy külön osztályt, amelyhez a címke például h1 vagy li. Ebben az esetben mi presvaevat osztályban, hogy a tag li. Úgy néz ki, az alábbiak szerint:
Itt jöttek fel a S1 osztály
Mindent. Most simaságát csak akkor fog működni a kapcsolat, amely hozzá van rendelve a S1 osztály
Különböző linkek színe
Ahhoz, hogy a kapcsolatok különböző színekben, ha lebeg egy oldalon, minden tag van rendelve egy hivatkozást különböző osztályok a stílus. Nézzük a gyakorlatban:
Mint látható, a második tag már li class s2.
Röviden itt kérünk minden referencia-más színű, ha lebeg, majd minden osztály kérés tag (li) az oldalon.
A sima jobbra tolódása az oldalon linkek
Azt mondják, egyszer, hogy ez a hatás valószínűleg tetszeni sokan nem, de a gyakorlatban gyakran látni őt. Szeretem, és szeretném megosztani veletek.
Legyen ez egy sima váltás meglehetősen egyszerű. Csak meg kell rendelni a listát az oldalon div tag a megfelelő osztályban.
Kezdeni, szükségünk van egy lista a html kód is, nem fogjuk használni ul és li címkék:
Ahogy talán már észre, hogy már felkerült a listára tag
Most, hogy ez a munka a stílusok szeretné hozzáadni a következő:
Alapértelmezés (a példában) a sebesség az animáció 0,1 másodperc, és a nyírási távolság 8 képpontnál. Természetesen ezek az értékek változhatnak, hogy a kísérlet, hogy úgy mondjam. -)
Hogyan, hogy egy sima átmenet nem a szöveg színét, és a zökkenőmentes átmenetet a szöveg hatása szöveges árnyék (Van itt egy fény hatása), és hogy ezért csak nem történik zökkenőmentesen ...
Itt prmer én ...
.postcontent a. postcontent a: link
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
szín: #FFFFFF;
>
postcontent a: látogatták meg. postcontent a.visited
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
szín: #FFFFFF;
>
postcontent a: hover. postcontent a.hover
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
-moz-átmenet: árnyék 0.2s 0.02s könnyű;
-o-átmenet: árnyék 0.2s 0.02s könnyű;
-WebKit-átmenet: árnyék 0.2s 0.02s könnyű;
szín: #EAEFCD;
text-shadow: 0px 0px 20px # 00c6ff;
>
-moz-átmenet: árnyék 0.2s 0.02s könnyű;
-o-átmenet: árnyék 0.2s 0.02s könnyű;
-WebKit-átmenet: árnyék 0.2s 0.02s könnyű;
Hozzá kell tenni, itt:
És ahelyett, hogy az összes árnyék
Minden értette ... az animáció (átmeneti) szükséges volt beilleszteni attribútum árnyék, és a szöveg árnyék
mint ez
-moz-átmenet: text-shadow 0.2s 0.02s könnyű;
-o-átmenet: text-shadow 0.2s 0.02s könnyű;
-WebKit-átmenet: text-shadow 0.2s 0.02s könnyű;