2 odpowiedzi w tym temacie

[ptk.]

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

 

 

[GiboneKPL]

Ale w pseudoklasie :hover też trzeba dodać, żeby też powoli się wyłączał czyli:

 

#box:hover {
width:100px;
height:100px;
background-color:red;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
-ms-transition:all .3s linear;
}

[ptk.]

Mylisz się, nie ma takiej potrzeby