Tamás mai cikke elsősorban a webdesign iránt érdeklődőknek kedvez.
A CSS3 szabvány sok új lehetőséget ad animációk megvalósítására, mindenféle beépülő modul, vagy bonyolult grafikai programozás nélkül. Ebben a példában egyszerű divekkel fogunk megmutatni néhány alapvető animációs lehetőséget.
A html kódunkban csupán a 4 üres div-et kell szerepeltetnünk a megfelelő elnevezésekkel.
A összes többi kód részlet már a stílus leírásba kerül.
Jelen esetben a head részben elhelyezett style tagek közé.<br>đ
<div id="elso"></div>
<div id="masodik"></div>
<div id="harmadik"></div>
<div id="negyedik"></div>
Először is definiáljuk a 4 terület méretét, elhelyezkedését és háttérszínét.
Az animáció beállítását az animation tulajdonsággal írhatjuk le. Első paramétere egy függvénynév, ami megadja magát az animációt, a második az időtartam, a harmadik a lefutás időgörbéje (linear: egyenletes), a negyedik pedig a időbelisége (infinite: végtelen).
A többféle böngészők miatt még érdemes kirakni a -moz-, -o-, -webkit- kapcsolókat is.
#elso {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
animation: mozog 4s linear infinite;
-moz-animation: mozog 4s linear infinite;
-webkit-animation: mozog 4s linear infinite;
-o-animation: mozog 4s linear infinite;
}
Az animáció leírására az @keyframes kulcsszó, és mögé írt a függvénynév szükséges.
Százalékos megadással írhatjuk le az elérni kívánt állapotokat. A mozog függvénynél a bal margó beállítását variáljuk.
A böngésző kapcsolókat itt is érdemes megadni.
@keyframes mozog{
0%{margin-left: 0px;}
50%{margin-left: 400px;}
}
A forgó animációnál a transform tulajdonság rotate paraméterét használjuk. A átszineződésnél a background-color-t kell állítgatni. A méretezésnél pedig a width, height, és a margin értékeket.
@keyframes forog{
100%{transform: rotate(360deg);}
}
@keyframes szinez{
25%{background-color: red;}
50%{background-color: orange;}
75%{background-color: yellow;}
}
@keyframes meretez{
50%{width: 120px;height: 120px;margin:0;}
}
Jó gyakorlást kívánunk!
A következő, augusztus végén induló Akkreditált Webdesigner Mester tanfolyamra augusztus 20-ig jelentkezhet!
Dolgozzon képzett Webdesignerként a képzés sikeres elvégzése után!
Kiscsoportos, gyakorlat orientált képzés, angol-magyar akkreditált bizonyítvánnyal, részletfizetési lehetőséggel, munkalehetőségekkel a tanfolyam végén!
Jelentkezzen itt, vagy bármelyik másik elérhetőségünkön!
További, augusztus végén induló képzéseinkért kattintson ide!
NetlogiC School Informatika Szakképző Iskola Pécs
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
