Orei bune din timpul zilei. 🙂
Vizitând alte site-uri ale altor persoane, ați putea observa un efect interesant, de exemplu, pe aceleași pictograme pe care le puteți spune în rețelele sociale, când se deplasează, se rotesc în sensul acelor de ceasornic. Acest efect este foarte interesant, nu obișnuit și destul de vizibil. În timp ce am scris articolul am decis să-l instalez eu
Pentru a face acest lucru, avem nevoie de doi parametri CSS.
- tranziția este un parametru care va seta timpul de animație.
- transform este un parametru care va crea o animație și va roti pictogramele.
Deci, trebuie să determinăm elementul pe care îl trezim. Apoi, întrebați-i o clasă sau dacă clasa este deja setată, adăugați următoarele stiluri. În cazul nostru, clasa elementului este .block.
Doar asociați parametrul de tranziție la element. Acestea sunt setate de mai multe ori, pentru compatibilitatea cu browser-ul încorporat - -moz-transition, -webkit-transition, -o-transition, -ms-transition, transition.
În toate, o valoare este de 0,8s. ceea ce înseamnă că animația va dura 0,8 secunde. Deci, puteți schimba pentru a accelera sau a încetini efectul.
Elementul când se hovering (proprietate -: hover) - setați parametrul transform. De asemenea, este setat de mai multe ori pentru compatibilitatea cu browser-ul încrucișat și contează - 360deg. Aceasta este gradul în care imaginea va fi rotită. 360 - adică, o revoluție completă, dacă nu doriți să specificați o revoluție completă, puteți reduce valoarea.
Acum puteți roti orice element, oferindu-i un efect interesant.
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
Dacă ai putea folosi munca mea, poți susține site-ul :)
Bună dragă prietenă
Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă și, prin urmare, contribuiți la dezvoltarea acestuia. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră
Trimiteți-le prietenilor: