Witam.
Dziś przedstawię wam jak płynnie zmienić wielkość figury np. kwadratu o wymiarach 50px na 50px w 100px na 100px.
Zrobimy to tak że po najechaniu na tą figurę powiększy się ona.
Użyjemy do funkcji transition i hover (co to jest hover i jak z niego korzystać znajdziesz Tu :http://amxx.pl/topic...orzenie-hoveru/ )
Co to jest transition ?
Pozwala ona utworzyć nam płynne przejście miedzy jednymi wartościami CSS w drugie.
Transition można różnie definiować jednak my zajmiemy się skrótem dla wszystkich własności.
transition:<własność jaką będziemy animować jeśli chcesz wszystko wpisz all> <czas w sekundach np 3s> <określa jakie przejście ma być czy prostoliniowe czy może ma na początku być wolne a na końcu przyspieszyć my bedziemy korzystać z własności linear>;
W html wstawiasz kod:
<div id="box"> // to będzie nasz kontener który będziemy edytować czyli box </div>
teraz czas na css:
#box { width:50px; // okresla szerokość naszego boxa height:50px; // określa wysokość naszego boxa background-color:black; // Kolor boxa przed najechaniem na niego transition:all .3s linear; // Przejście all-każdy element , .3s - Czas przejścia (0.3s zapisujemy jako .3s) ,linear - płynne (liniowe) przejście //Dodajemy przerostki do poszczególnych przeglądarek aby efekt był prawidłowy na wszystkich -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -ms-transition:all .3s linear; } //teraz dodajmy hover. czyli zmiana boxa po najechaniu na jego myszką #box:hover { width:100px; // okresla szerokość naszego boxa po najechaniu myszką height:100px; // określa wysokość naszego boxa po najechaniu myszka background-color:red; // Kolor boxa po najechaniem na niego myszką }
Nom i to tyle mam nadzieje że komuś się przyda