L'uso delle glyph consete di aggiungere facilmente immagini vettoriali alle applicazioni, agendo su colori e dimensioni senza necessità di creare nuovamente gli asset.
Se si opta per una library come FontAwesome, sono già inclusi una serie di effetti da applicare, mentre per i glyph di Bootstrap questo non è vero.
Grazie alle animazioni di CSS3, è sufficiente aggiungere questo stile per avere il supporto per la rotazione:
.glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; -moz-animation: spin 1000ms infinite linear; -o-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
Il principio su cui si basa questo codice è semplice: viene ruotato l'elemento, agendo sulla trasformazione. Questo effetto si applica a glyph che siano centrati e funziona con tutti i browser:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Reactive form tipizzati con modellazione del FormBuilder in Angular
Creazione di componenti personalizzati in React.js con Tailwind CSS
Sfruttare al massimo i topic space di Event Grid MQTT
Gestire liste di tipi semplici con Entity Framework Core
Gestire domini wildcard in Azure Container Apps
Utilizzare il trigger SQL con le Azure Function
Usare lo spread operator con i collection initializer in C#
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Potenziare Azure AI Search con la ricerca vettoriale
Code scanning e advanced security con Azure DevOps
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework