Skocz do zawartości

  • Zaloguj korzystając z Facebooka Zaloguj korzystając z Twittera Zaloguj przez Steam Zaloguj poprzez Google      Logowanie »   
  • Rejestracja

Witamy w Nieoficjalnym polskim support'cie AMX Mod X

Witamy w Nieoficjalnym polskim support'cie AMX Mod X, jak w większości społeczności internetowych musisz się zarejestrować aby móc odpowiadać lub zakładać nowe tematy, ale nie bój się to jest prosty proces w którym wymagamy minimalnych informacji.

  • Rozpoczynaj nowe tematy i odpowiedaj na inne
  • Zapisz się do tematów i for, aby otrzymywać automatyczne uaktualnienia
  • Dodawaj wydarzenia do kalendarza społecznościowego
  • Stwórz swój własny profil i zdobywaj nowych znajomych
  • Zdobywaj nowe doświadczenia

Dołączona grafika Dołączona grafika

Guest Message by DevFuse
 

Zdjęcie
CSS

Efekty przejścia (transition)

css

  • Nie możesz napisać tematu
  • Zaloguj się, aby dodać odpowiedź
2 odpowiedzi w tym temacie

#1 ptk.

    Wszechwidzący

  • Zbanowany

Reputacja: 31
Życzliwy

  • Postów:248
  • GG:
  • Imię:Patryk
  • Lokalizacja:PL
Offline

Napisano 05.01.2014 17:31

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 :>

 

 



#2 GiboneKPL

    Życzliwy

  • Użytkownik

Reputacja: 5
Nowy

  • Postów:29
  • GG:
  • Imię:Maciek
  • Lokalizacja:Brzesko
Offline

Napisano 06.01.2014 12:21

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;
}

  • +
  • -
  • 0

#3 ptk.

    Wszechwidzący

  • Autor tematu
  • Zbanowany

Reputacja: 31
Życzliwy

  • Postów:248
  • GG:
  • Imię:Patryk
  • Lokalizacja:PL
Offline

Napisano 18.01.2014 16:18

Mylisz się, nie ma takiej potrzeby :D







Również z jednym lub większą ilością słów kluczowych: css

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych