Recent, am interesat într-un efect vizual simplu: atunci când apare subliniere cursorul mouse-ului de la centru, cu ajutorul animației. Creați un astfel de efect este surprinzător de simplu, nu necesită adăugarea de elemente DOM suplimentare în codul HTML, iar în browsere mai vechi care nu acceptă animații CSS, acesta va arata normal, ca de obicei subliniere. Puteți vedea acest efect de mai jos.
După aceea, se adaugă un chenar și ascunde-l cu transformarea. Acest lucru se face prin stabilirea acestor proprietăți pseudo-elemente: înainte și setarea valorilor axa X la scară 0. Ca paliativ ascunde aceste proprietăți prin vizibilitate: ascunse pentru browserele care nu acceptă un CSS animație:
La final am punct elementul toate insufletit aplicat se schimbă valoarea duratei de 0,3 secunde. Acum, la animație acolo, trebuie doar pentru a face elementul vizibil din nou atunci când deplasați cursorul mouse-ului și setați axa scală pentru valoarea X 1:
Și asta este! În orice caz, într-o demonstrație de stânga producătorii de top box pentru versiunile mai vechi de Firefox și Opera, dar dacă nu aveți nevoie pentru a sprijini versiuni mai vechi, se poate utiliza numai proprietatea fără prefixe și producător prefix producător -webkit, atât în codul CSS în textul lecției.
Traduceri - Duty Officer
Articole similare
-
Crearea butoanelor cu pictograme, dar fără imagini utilizând css
-
Crearea de panorame sferice pentru principiile generale ale lecțiilor 3d
Trimiteți-le prietenilor: