Questo post contiene una selezione di vari effetti e animazioni CSS che possono essere utili nel tuo lavoro, oltre a eliminare la necessità di ricorrere costantemente a JavaScript. Forse gli esempi non sono i più nuovi e insoliti, ma a mio parere, utili.
1. Orologio CSS3 con jQuery
Questo orologio è stato creato utilizzando uno dei principali strumenti CSS3 - ruotare e con la libreria jQuery inclusa.2. Orologio analogico CSS
Un orologio analogico più classico. Vengono creati con la transizione del webkit e la proprietà Transform CSS. Ma affinché l'ora corrisponda a quella corrente, è necessario JavaScript.
3. Cubo 3D rotante
La rotazione e il movimento lungo i lati del cubo verranno eseguiti utilizzando i tasti standard "su", "giù", "sinistra" e "destra". La forma 3D stessa è costruita utilizzando webkit-perspective, -webkit-transform e -webkit-transition.
4. Cubi 3D retrattili multipli
Ci sono già diversi cubi 3D presentati qui, usando CSS3 e direttamente le proprietà di trasformazione e transizione. Passare il mouse su un cubo lo fa scivolare di lato, rivelando il testo che si trova sull'altro lato della forma.
5. Menù Fisarmonica
L'effetto "menu a fisarmonica" su CSS puro, dove cliccando su ciascuna delle righe si apre una finestra aggiuntiva nel corpo dell'elenco stesso. Animazione nativa nei browser basati su WebKit.
6. Scorrimento parallasse con CSS
È lo scorrimento automatico della parallasse animato utilizzando transizioni CSS basate su WebKit. Passando il mouse sopra la casella di testo, le stelle sullo sfondo iniziano a spostarsi gradualmente di lato. L'effetto del volo è creato.
7. Matrice
Il film cult "The Matrix" è uno dei migliori film di fantascienza. Questo esempio mostra come ricreare la stessa fantastica animazione (schermo nero con numeri in esecuzione) in CSS3.
8. Palaridi dinamici
Questo esempio spiega come creare foto animate basate sui comandi CSS3. Quando fai clic su un'immagine, questa si ingrandisce e si sposta in primo piano.
9. Ridimensionamento dell'immagine
In questo esempio, le immagini vengono semplicemente ingrandite al passaggio del mouse. Un effetto semplice, ma a volte molto utile.
10. Effetti JavaScript su CSS3
In alternativa a JavaScript, questo post suggerisce sette effetti CSS3: vari blocchi che ruotano, scompaiono, scivolano fuori, crescono, ecc.
11. Registri virtuali di DJ Hero
Il post spiega come creare record rotanti. La velocità di rotazione può essere regolata direttamente sullo schermo.
12. Vinile scorrevole
L'effetto scorrevole dei dischi in vinile viene creato utilizzando le transizioni CSS3 e HTML. Questo tipo di animazione dà vita alla pagina web, aggiunge originalità alla copertina standard dell'album e così via.
13. Effetti al passaggio del mouse su un'immagine
Quando passi con il mouse su un'immagine, questa può spostarsi di lato, girare, rimpicciolirsi, trasformarsi da quadrata a rotonda, diventare sfocata... In una parola, le immagini cambieranno le loro proprietà in ogni modo possibile.
14. Triangolo rotante
Quando fai clic sul triangolo, inizia a ruotare.
15. Spazio
Un intero spazio esterno racchiuso in CSS. Funge da esempio di sovrapposizione dei livelli a rotazione (più evidente quando si esegue lo zoom indietro nel browser).
16. "Meninas" in 3D
Un interessante effetto CSS che fa apparire tridimensionale il famoso dipinto "Menina" di Diego Velazquez.
17. CSS per Mac OS X
Nella parte inferiore dello schermo c'è una serie di icone di base di Mac OS X che ingrandiscono al passaggio del mouse. L'effetto conferisce dinamicità al sito.
18. Modali drop-in
Gli effetti CSS3 e le proprietà Drop-In Modals ti aiutano a creare modifiche modali rapide, animate e facili.
19. Animazione di oggetti
La trasformazione cambia l'aspetto dell'elemento nel browser. Mostrato usando l'esempio di un razzo che "vola" da un'estremità all'altra dello schermo. È possibile utilizzare strumenti di spostamento, strumenti di rotazione, ecc.
20. Orologio colorato
L'orologio a colori è alimentato da jQuery e CSS3. Questo effetto tornerà utile nel contesto dell'attesa del tempo di completamento di alcuni concorsi, votazioni e simili.
21. Galleria lightbox con jQuery e CSS3
Questa è un'ottima galleria che ti consente di ordinare e organizzare le immagini in un ordine selettivo. Per l'interattività la galleria utilizza jQuery, jQuery UI e il plugin jQuery FancyBox. Lightbox mantiene il titolo e la descrizione delle immagini, le raggruppa e dispone automaticamente le diapositive in fila.
22. Anteprima "Elastico"
Ingrandisci l'anteprima dell'immagine al passaggio del mouse. Pertanto, quando si fa clic, il menu aumenta proporzionalmente.
23. Carte dinamiche
Questo esempio è un insieme dinamico di carte che utilizza le funzionalità HTML e CSS3.
24. Menu jQuery scorrevole
Lo slideout di esempio viene creato con una combinazione di CSS3 e jQuery. Quando passi il mouse su un'immagine, viene visualizzata una finestra pop-up con del testo.
25. Schede CSS
Nell'esempio, passando il cursore del mouse sui titoli delle schede si modifica l'elenco sottostante.
26. Menu fisheye
L'esempio mostra come creare un menu Fisheye utilizzando CSS e animazioni SVG. Come bonus aggiuntivo, viene utilizzato un SVG demo nel tag IMG.
27. Menu a discesa
Questo tipo fornisce una navigazione molto comoda attraverso il menu principale, grazie all'uso delle transizioni CSS3.
28. Didascalie da Star Wars
Crediti famosi da "Star Wars". HTML e CSS saranno sufficienti per eseguirli.
29. Altri effetti fisheye CSS
Ancora una volta, icone che crescono al passaggio del mouse.
30. Animazione del tipo "fotogramma per fotogramma"
Sono possibili diverse opzioni dimostrative.Nel primo esempio, per garantire il cambio di frame, è necessario cliccare sull'immagine. Ogni clic è un movimento. I fotogrammi vengono ripetuti, viene creato un certo ciclo.
Nel secondo esempio, per cambiare frame, è sufficiente spostare il cursore sull'immagine. Di conseguenza, la velocità dell'animazione dipenderà dalla velocità del movimento del mouse.
31. Camminatore AT-AT imperiale
Ancora Star Wars: questo deambulatore AT-AT è realizzato con CSS3.
32. Un'altra fisarmonica CSS
Quando fai clic su una riga, la tabella viene espansa.
33. Menu a scorrimento semplice
40. Menu a discesa
Un'altra opzione per un menu a discesa CSS semplice e carino.
Se ti piace l'effetto, puoi semplicemente copiare il codice finito e usarlo!
Dai vita al tuo sito web!
Vari effetti al passaggio del mouse possono portare freschezza alle pagine del tuo sito. In precedenza, a tutti gli effetti, si doveva fare i conti con javascript, ma oggi, dopo l'avvento della tecnologia CSS3, tutto può essere fatto aggirando l'uso di javascript.
Gli esempi di oggi sono tutti implementati e ottimizzati per i nuovi browser moderni e funzioneranno sicuramente con essi (ad esempio, nei browser Mozilla o WebKit). Non possiamo assicurarti di lavorare in IE, ma nelle versioni più recenti, gli effetti funzioneranno sicuramente come previsto. Ma non dimenticare che un'interessante opzione di rollback è stata preparata per ogni effetto nel caso in cui il browser non supporti ancora l'effetto.
01. Aumenta
Dimostrazione: Vedere
Questo effetto è molto facile da implementare e può essere realizzato in diversi modi. Abbiamo utilizzato un metodo in cui viene aggiunto un parametro di margine a ciascuna immagine e quindi, al passaggio del mouse, questo parametro viene rimosso. Diciamo che l'impostazione del margine inizia a 15 pixel e al passaggio del mouse diventa 2 pixel, il che fa sembrare che l'immagine rimbalzi. Puoi anche usare questo effetto con il testo, anche se i collegamenti sono verticali anziché orizzontalmente.
La transizione qui può essere impostata a tua discrezione e l'effetto sarà anche attraente senza alcuna transizione. Ad esempio, abbiamo reso l'effetto un po' liscio, cosa che pensavamo avrebbe aggiunto un po' di sapore all'effetto.
Migliora CSS
Ex1 img (
bordo: 5px solido #ccc;
galleggiante: sinistro;
margine: 15px;
-transizione-webkit: margine di 0,5 secondi di allentamento;
-moz-transition: margine di 0,5 secondi di allentamento;
-o-transizione: margine 0,5 s di allentamento;
}
Ex1 img: hover (
margine superiore: 2px;
}
02. Impila e cresci
Dimostrazione: Vedere
L'autore di questo effetto apparentemente voleva ottenere una sorta di effetto lampada lava, poiché quando si passa il mouse sull'elenco dei collegamenti, ogni immagine si espande lentamente e poi torna alle dimensioni originali.
Per l'implementazione qui sono state utilizzate immagini con una dimensione di 400x133 pixel. Sono stati quindi ridimensionati a 300x100 pixel utilizzando CSS ed espansi al passaggio del mouse. Poiché l'intero elenco è centrato nell'esempio, la nuova dimensione delle immagini ha rifratto l'intero allineamento. Questo problema può essere risolto impostando i margini negativi alla metà della larghezza delle immagini ingrandite.
Codice CSS per Stack & Grow
/ * Esempio 2 * /
#contenitore (
larghezza: 300 px;
margine: 0 automatico;
}
# ex2 img (
altezza: 100px;
larghezza: 300 px;
margine: 15px 0;
-webkit-transition: facilità di tutto;
-moz-transition: facilita tutti gli 1;
-o-transizione: tutti 1s facilitano;
}
# ex2 img: hover (
altezza: 133px;
larghezza: 400 px;
margine sinistro: -50px;
}
03. Dissolvenza testo in entrata
Dimostrazione: Vedere
Qui l'autore voleva creare qualcosa come un evento di tipo javascript, quando si passa il cursore su un elemento e l'effetto viene visualizzato su un altro. Qui il testo e l'immagine sono stati presi e poi inseriti in un div separato, allineato a sinistra. Successivamente, i parametri color: transparent e line-height: 0px sono stati aggiunti al div. Ciò ha permesso di posizionare il testo nella parte superiore del div e di nasconderlo del tutto.
Affinché il testo appaia di nuovo, cambiamo semplicemente il colore e l'altezza della linea. Quando passi con il mouse sull'immagine, il testo riappare. Effetto molto divertente e facile.
Dissolvenza testo in CSS
# ex3 (
larghezza: 730 px;
altezza: 133px;
altezza della linea: 0px;
colore: trasparente;
dimensione del carattere: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
peso del carattere: 300;
text-transform: maiuscolo;
}
# ex3: hover (
altezza della linea: 133px;
colore: # 575858;
}
# ex3 img (
galleggiante: sinistro;
margine: 0 15px;
}
04. Foto storta
Dimostrazione: Vedere
Questo effetto è molto semplice, ma funziona benissimo per una galleria di miniature. Innanzitutto, è necessario creare una griglia di immagini, quindi ruotare le immagini quando ci si passa sopra con il mouse, il che crea un effetto attraente.
Ci sono molti nuovi valori CSS da usare qui, quindi vale la pena considerare anche l'opzione di rollback per i browser più vecchi. Nella nostra galleria, tuttavia, verranno utilizzate transizioni, trasformazioni e ombre a blocchi, secondo i tuoi desideri. La trasformazione sarà responsabile della rotazione dell'immagine e le transizioni saranno responsabili dell'effetto morbido e uniforme.
Qui è dove puoi applicare pseudo-selettori.
CSS foto storta
# ex4 (
larghezza: 800 px;
margine: 0 automatico;
}
# ex4 img (
margine: 20px;
bordo: 5px solido #eee;
-webkit-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-webkit-transition: tutti i 0.5s easy-out;
-moz-transition: tutti gli 0,5 secondi facilitano;
-o-transizione: tutti i 0,5 secondi facilitano;
}
# ex4 img: hover (
-webkit-transform: ruota (-7deg);
-moz-transform: ruota (-7deg);
-o-transform: ruota (-7deg);
}
05. Dissolvenza e riflessione
Dimostrazione: Vedere
Questo effetto è un po' più complicato da implementare, quindi abbiamo dovuto armeggiare un po' per ottenere un effetto decente. La posizione dell'immagine standard è leggermente trasparente. Quindi, quando si passa con il mouse sull'immagine, il livello di trasparenza viene abbassato e l'immagine viene ripristinata al suo aspetto originale, oltre a un leggero bagliore e un riflesso (solo per i browser della famiglia WebKit).
Sfortunatamente, il riflesso non è proprio una transizione, quindi appare immediatamente, anche se il resto del contenuto appare al rallentatore.
Se sei confuso sul CSS per le riflessioni, puoi leggere di più su di esso in (David Walsh).
Effetto dissolvenza in apertura e riflesso CSS
# ex5 (
larghezza: 700 px;
margine: 0 automatico;
altezza minima: 300 px;
}
# ex5 img (
margine: 25px;
opacità: 0,8;
bordo: 10px solido #eee;
/ * Transizione * /
-transizione-webkit: tutti i 0,5 secondi facilitano;
-moz-transition: tutti gli 0,5 secondi facilitano;
-o-transizione: tutti i 0,5 secondi facilitano;
/ * Riflesso * /
-webkit-box-reflect: sotto 0px -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (trasparente), color-stop (.7, trasparente), a (rgba (0,0,0,0.1)) );
}
# ex5 img: hover (
opacità: 1;
/ * Riflesso * /
-webkit-box-reflect: sotto 0px -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (trasparente), color-stop (.7, trasparente), a (rgba (0,0,0,0.4)) );
/ * Incandescenza * /
-webkit-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
}
Conclusione
Questi 5 esempi dovrebbero essere sufficienti per ispirarti a creare qualcosa di tuo. Ricorda che puoi sempre sperimentare con esempi già pronti e poi raccontarceli.
Se ti sei imbattuto in altri effetti interessanti da qualche parte in rete, comunicacelo a noi e al resto dei lettori.
Prima di tutto, per coloro che non sono completamente nell'argomento o non sono affatto nell'argomento, spiegherò brevemente di cosa si tratta. Si tratta di vari tipi di effetti (popup, tooltip, transizioni graduali, trasformazioni, rotazione, zoom, offset, ecc.) applicati agli elementi di un sito Web quando ci si passa sopra con il cursore del mouse. Questi effetti possono essere implementati utilizzando vari plugin jQuery o puri.
Oggi ho preparato una vasta collezione di effetti hover originali per immagini create utilizzando CSS3, senza collegare librerie javascript. Non parlerò dei vantaggi e degli svantaggi dell'implementazione di effetti hover in puro CSS3, questo è un altro argomento, basta guardare gli esempi e, se necessario, utilizzare quello che ti piace sul tuo sito. Tutti gli effetti presentati nella recensione sono forniti con un esempio demo e una documentazione dettagliata con le fonti. I manuali sono per lo più in borghese, ma tutto è più o meno intuitivo.
Voglio solo attirare la tua attenzione sul fatto che tutti questi esempi funzioneranno correttamente solo nei browser moderni che supportano le proprietà CSS3.
Per non rompere il quadro generale, non ha distorto i nomi degli effetti con la traduzione automatica (ad eccezione di alcuni), ha lasciato gli originali dei titoli come li chiamava lo sviluppatore.
Un effetto hover molto interessante per le immagini in miniatura, che utilizza linee sottili nel design e nella tipografia. Diversi tipi di effetti per l'aspetto delle didascalie per le immagini, trasformazioni 3D morbide e non invadenti e transizioni fluide di pseudo-elementi. Funziona solo nei browser moderni.
iHover è un'impressionante raccolta di puri effetti al passaggio del mouse CSS3, con supporto Bootstrap 3. Costruito con Scss CSS (file), facilmente modificabile con variabili. Il codice è modulare, non è necessario includere l'intero file. Oltre 30 effetti diversi in un unico pacchetto. Tutto è abbastanza ben documentato e gli effetti sono molto facili da usare. Tutto quello che devi fare è allineare correttamente il markup HTML e far funzionare il file CSS.
Crea alcuni effetti al passaggio del mouse semplici ma eleganti per le didascalie delle immagini. L'idea è di far apparire il titolo, il nome dell'autore e il pulsante di collegamento in modo drammatico quando si passa con il mouse sulle miniature. Per alcuni effetti vengono utilizzate trasformazioni visive 3D.
Un effetto di transizione molto semplice, senza particolari campane e fischietti, un'immagine completamente rotonda in una cornice, si trasforma cambiando la messa a fuoco al passaggio del mouse e il gioco è fatto.
Effetti al passaggio del mouse per le miniature CSS3
Lo sviluppatore posiziona il suo lavoro come esempio di una galleria di immagini con effetti di transizione quando vengono visualizzate annotazioni (didascalie) per le miniature. Viene dichiarato un forte supporto per i browser moderni, incluso IE 9+. Certo, è difficile chiamarla una galleria a tutti gli effetti, ma l'effetto dell'aspetto delle firme è piuttosto interessante.
Un altro set di regole CSS per creare effetti di trasformazione impressionanti quando si passa con il mouse su miniature assolutamente circolari. Il pacchetto contiene 7 tipi di transizioni CSS3, documentazione molto dettagliata sulla configurazione e l'utilizzo. Gli effetti sono supportati da tutti i browser moderni.
Rotazione delle miniature al passaggio del mouse
Il semplice effetto di ruotare le miniature rotonde quando ci passi sopra con il cursore del mouse è più o meno lo stesso che puoi vedere sul mio blog, negli annunci dei post nella pagina principale. È implementato in un paio di righe di codice CSS.
Se tradotto letteralmente: "Effetto sessuale quando ci passi sopra". Certo, difficilmente noterai qualcosa di così sexy in questo effetto, a meno che tu non abbia un'immaginazione violenta, ma l'effetto è interessante a modo suo e vale la pena prestare attenzione.
Cinque diversi effetti al passaggio del mouse per le immagini. Didascalie pop-up in tre varianti, tende a forma di variazione del grado di trasparenza e rotazione con movimento orizzontale.
4 Tipi di effetti di animazione per le didascalie delle immagini, implementati esclusivamente utilizzando CSS3. Diverse posizioni di dissolvenza ed effetti di transizione, prestazioni abbastanza standard. Per capire come funziona l'animazione, date un'occhiata al codice sorgente della pagina demo, non ho trovato alcuna documentazione separata.
Miniature foderate di galleria con vari aspetti delle didascalie, rotazione, dissolvenza, pop e altro. La documentazione sull'uso e la configurazione è piuttosto scarsa, ma se lo vuoi davvero, puoi capirlo.
Questo effetto non rappresenta nulla di speciale, un banale cambiamento nella luminosità delle immagini al passaggio del mouse, tranne che vengono aggiunti elementi di animazione. Dovrai capire tu stesso i dettagli dell'implementazione espandendo il codice sorgente della demo.
Un altro set di 10 effetti al passaggio del mouse per le immagini, varie modifiche delle miniature al passaggio del mouse, zoom, rotazione, rotazione, dissolvenza, ecc.
Vari effetti per animare la cornice attorno alle immagini, sembra piuttosto attraente, c'è una guida dettagliata su come impostare e utilizzare.
Effetti al passaggio del mouse CSS3 originali applicati per visualizzare in modo efficace le didascalie delle miniature al passaggio del mouse. Il set di regole CSS include 10 effetti diversi che puoi utilizzare separatamente per immagini diverse. Gli effetti sono davvero impressionanti, soprattutto quando ti rendi conto che è tutto fatto con CSS3. Una guida dettagliata ti aiuterà a capire cosa è cosa.
L'idea è di creare un SVG che sia una forma di sfondo per un qualche tipo di scritta e si trasformi in un'altra forma al passaggio del mouse. Pertanto, puoi creare molte opzioni diverse, nell'esempio vengono mostrati tre tipi di effetti di transizione. La cosa bella dell'utilizzo di SVG è che possiamo ridimensionare il form per adattarlo al contenitore padre.
Immagini scorrevoli
L'essenza di questo effetto è che l'immagine viene spostata su e giù per l'aspetto della firma. Se lavori con i parametri di stile, penso che puoi ottenere effetti piuttosto carini, ma per impostazione predefinita, tutto sembra molto semplice.
Con questo effetto, tutto è semplice, le didascalie delle immagini scorrono in alto a destra o a sinistra in basso, sotto forma di un nastro con uno sfondo scuro traslucido, tutto è molto semplice da riformare usando le proprietà css.
Una soluzione interessante, le miniature sono presentate in una forma oscurata, quando ci passi sopra, le immagini appaiono e la firma si apre su uno sfondo chiaro.
Una didascalia dell'immagine emerge dall'angolo e si espande diagonalmente su tutta l'area dell'immagine.
Alcune soluzioni più interessanti per l'implementazione di didascalie a comparsa per le miniature delle immagini. Nell'editor online, puoi sperimentare i parametri e ottenere risultati più impressionanti.
Una serie di bellissimi effetti quando si passa con il mouse sulle miniature, vari tipi di aspetto e design delle didascalie per le immagini. Linee sottili in contrasto con uno sfondo leggermente più scuro creano blocchi di informazioni di facile lettura.
Forme bizzarre ed effetto zoom combinati con l'effetto di animazione delle didascalie alle immagini in miniatura.
Meravigliosi effetti di sovrapposizione di icone sulle miniature delle immagini in diverse varianti di aspetto. L'esempio utilizza il simbolo (+) delineato in un cerchio utilizzando border-radius: nei CSS, puoi anche utilizzare le icone dei caratteri per rendere il pannello a comparsa più informativo.
Un esempio di creazione di un effetto slide visivo per l'output di didascalie volumetriche alle immagini utilizzando solo CSS3 e HTML5.
6 Didascalie delle immagini
6 Opzioni per l'aspetto delle didascalie a comparsa per le immagini al passaggio del mouse utilizzando CSS3. Lezione dettagliata su implementazione e configurazione, fonti disponibili per il download.
E infine, alla fine, per così dire, non posso non menzionare il modo più semplice per creare una didascalia pop-up per una miniatura usando CSS3.
Prima di tutto, per coloro che non sono completamente nell'argomento o non sono affatto nell'argomento, spiegherò brevemente di cosa si tratta. Si tratta di vari tipi di effetti (popup, tooltip, transizioni graduali, trasformazione, rotazione, zoom, offset, ecc.) applicati agli elementi di un sito web con il cursore del mouse su di essi. Questi possono essere implementati sia con l'aiuto di vari plugin jQuery, sia in uno puro.
Oggi ho preparato una vasta collezione di effetti hover originali per immagini create utilizzando CSS3, senza collegare librerie javascript. Non parlerò dei vantaggi e degli svantaggi dell'implementazione di effetti hover in puro CSS3, questo è un altro argomento, basta guardare gli esempi e, se necessario, utilizzare quello che ti piace sul tuo sito. Tutti gli effetti presentati nella recensione sono forniti con un esempio demo e una documentazione dettagliata con le fonti. I manuali sono per lo più in borghese, ma tutto è più o meno intuitivo.
Voglio solo attirare la tua attenzione sul fatto che tutti questi esempi funzioneranno correttamente solo nei browser moderni che supportano le proprietà CSS3.
Per non rompere il quadro generale, non ha distorto i nomi degli effetti con la traduzione automatica (ad eccezione di alcuni), ha lasciato gli originali dei titoli come li chiamava lo sviluppatore.
Un effetto hover molto interessante per le immagini in miniatura, che utilizza linee sottili nel design e nella tipografia. Diversi tipi di effetti per l'aspetto delle didascalie per le immagini, trasformazioni 3D morbide e non invadenti e transizioni fluide di pseudo-elementi. Funziona solo nei browser moderni.
iHover è un'impressionante raccolta di puri effetti al passaggio del mouse CSS3, con supporto Bootstrap 3. Costruito con Scss CSS (file), facilmente modificabile con variabili. Il codice è modulare, non è necessario includere l'intero file. Oltre 30 effetti diversi in un unico pacchetto. Tutto è abbastanza ben documentato e gli effetti sono molto facili da usare. Tutto quello che devi fare è allineare correttamente il markup HTML e far funzionare il file CSS.
Crea alcuni effetti al passaggio del mouse semplici ma eleganti per le didascalie delle immagini. L'idea è di far apparire il titolo, il nome dell'autore e il pulsante di collegamento in modo drammatico quando si passa con il mouse sulle miniature. Per alcuni effetti vengono utilizzate trasformazioni visive 3D.
Un effetto di transizione molto semplice, senza particolari campane e fischietti, un'immagine completamente rotonda in una cornice, si trasforma cambiando la messa a fuoco al passaggio del mouse e il gioco è fatto.
Effetti al passaggio del mouse per le miniature CSS3
Lo sviluppatore posiziona il suo lavoro come esempio di una galleria di immagini con effetti di transizione quando vengono visualizzate annotazioni (didascalie) per le miniature. Viene dichiarato un forte supporto per i browser moderni, incluso IE 9+. Certo, è difficile chiamarla una galleria a tutti gli effetti, ma l'effetto dell'aspetto delle firme è piuttosto interessante.
Un altro set di regole CSS per creare effetti di trasformazione impressionanti quando si passa con il mouse su miniature assolutamente circolari. Il pacchetto contiene 7 tipi di transizioni CSS3, documentazione molto dettagliata sulla configurazione e l'utilizzo. Gli effetti sono supportati da tutti i browser moderni.
Rotazione delle miniature al passaggio del mouse
Il semplice effetto di ruotare le miniature rotonde quando ci passi sopra con il cursore del mouse è più o meno lo stesso che puoi vedere sul mio blog, negli annunci dei post nella pagina principale. È implementato in un paio di righe di codice CSS.
Se tradotto letteralmente: "Effetto sessuale quando ci passi sopra". Certo, difficilmente noterai qualcosa di così sexy in questo effetto, a meno che tu non abbia un'immaginazione violenta, ma l'effetto è interessante a modo suo e vale la pena prestare attenzione.
Cinque diversi effetti al passaggio del mouse per le immagini. Didascalie pop-up in tre varianti, tende a forma di variazione del grado di trasparenza e rotazione con movimento orizzontale.
4 Tipi di effetti di animazione per le didascalie delle immagini, implementati esclusivamente utilizzando CSS3. Diverse posizioni di dissolvenza ed effetti di transizione, prestazioni abbastanza standard. Per capire come funziona l'animazione, date un'occhiata al codice sorgente della pagina demo, non ho trovato alcuna documentazione separata.
Miniature foderate di galleria con vari aspetti delle didascalie, rotazione, dissolvenza, pop e altro. La documentazione sull'uso e la configurazione è piuttosto scarsa, ma se lo vuoi davvero, puoi capirlo.
Questo effetto non rappresenta nulla di speciale, un banale cambiamento nella luminosità delle immagini al passaggio del mouse, tranne che vengono aggiunti elementi di animazione. Dovrai capire tu stesso i dettagli dell'implementazione espandendo il codice sorgente della demo.
Un altro set di 10 effetti al passaggio del mouse per le immagini, varie modifiche delle miniature al passaggio del mouse, zoom, rotazione, rotazione, dissolvenza, ecc.
Vari effetti per animare la cornice attorno alle immagini, sembra piuttosto attraente, c'è una guida dettagliata su come impostare e utilizzare.
Effetti al passaggio del mouse CSS3 originali applicati per visualizzare in modo efficace le didascalie delle miniature al passaggio del mouse. Il set di regole CSS include 10 effetti diversi che puoi utilizzare separatamente per immagini diverse. Gli effetti sono davvero impressionanti, soprattutto quando ti rendi conto che è tutto fatto con CSS3. Una guida dettagliata ti aiuterà a capire cosa è cosa.
L'idea è di creare un SVG che sia una forma di sfondo per un qualche tipo di scritta e si trasformi in un'altra forma al passaggio del mouse. Pertanto, puoi creare molte opzioni diverse, nell'esempio vengono mostrati tre tipi di effetti di transizione. La cosa bella dell'utilizzo di SVG è che possiamo ridimensionare il form per adattarlo al contenitore padre.
Immagini scorrevoli
L'essenza di questo effetto è che l'immagine viene spostata su e giù per l'aspetto della firma. Se lavori con i parametri di stile, penso che puoi ottenere effetti piuttosto carini, ma per impostazione predefinita, tutto sembra molto semplice.
Con questo effetto, tutto è semplice, le didascalie delle immagini scorrono in alto a destra o a sinistra in basso, sotto forma di un nastro con uno sfondo scuro traslucido, tutto è molto semplice da riformare usando le proprietà css.
Una soluzione interessante, le miniature sono presentate in una forma oscurata, quando ci passi sopra, le immagini appaiono e la firma si apre su uno sfondo chiaro.
Una didascalia dell'immagine emerge dall'angolo e si espande diagonalmente su tutta l'area dell'immagine.
Alcune soluzioni più interessanti per l'implementazione di didascalie a comparsa per le miniature delle immagini. Nell'editor online, puoi sperimentare i parametri e ottenere risultati più impressionanti.
Una serie di bellissimi effetti quando si passa con il mouse sulle miniature, vari tipi di aspetto e design delle didascalie per le immagini. Linee sottili in contrasto con uno sfondo leggermente più scuro creano blocchi di informazioni di facile lettura.
Forme bizzarre ed effetto zoom combinati con l'effetto di animazione delle didascalie alle immagini in miniatura.
Meravigliosi effetti di sovrapposizione di icone sulle miniature delle immagini in diverse varianti di aspetto. L'esempio utilizza il simbolo (+) delineato in un cerchio utilizzando border-radius: nei CSS, puoi anche utilizzare le icone dei caratteri per rendere il pannello a comparsa più informativo.
Un esempio di creazione di un effetto slide visivo per l'output di didascalie volumetriche alle immagini utilizzando solo CSS3 e HTML5.
6 Didascalie delle immagini
6 Opzioni per l'aspetto delle didascalie a comparsa per le immagini al passaggio del mouse utilizzando CSS3. Lezione dettagliata su implementazione e configurazione, fonti disponibili per il download.
E infine, alla fine, per così dire, non posso non menzionare il modo più semplice per creare una didascalia pop-up per una miniatura usando CSS3.
Ho parlato di questo metodo in una delle mie lezioni precedenti:.
Con tutto il rispetto, Andrew
Molto spesso sui siti, potresti imbatterti in una modifica o pulsanti al passaggio del mouse. Una speciale pseudo-classe: il passaggio del mouse in CSS ti consente di implementare l'attività. Oggi considereremo alcune tecniche per realizzare questo trucco e di seguito pubblicheremo un elenco delle più interessanti (con brevi descrizioni / spiegazioni). Dividiamo tutte le opzioni in:
Questi gruppi sono molto arbitrari, poiché molti esempi si sovrappongono e sono universali, cioè si possono incontrare nella progettazione di oggetti diversi.
L'effetto al passaggio del mouse negli stili CSS viene aggiunto a destra dell'elemento come segue:
| a: hover (colore: rosso;) |
a: hover (colore: rosso;)
Molto spesso, il meccanismo viene utilizzato specificamente per i collegamenti al fine di cambiarne il colore o aggiungere/rimuovere la sottolineatura. Tuttavia, può essere assegnato ad altri blocchi, pulsanti, testi o utilizzato durante la creazione.
| pulsante: hover (sfondo: rgba (0, 0, 0, 0); colore: rosso;) .my-picture: hover (opacità: 0,5; filtro: alpha (opacità = 50);) |
button: hover (sfondo: rgba (0,0,0,0); color: red;) .my-picture: hover (opacità: 0,5; filtro: alpha (opacità = 50);)
I browser moderni percepiscono ugualmente correttamente l'effetto hover CSS al passaggio del mouse, sebbene nelle versioni precedenti di IE 6 e precedenti funzioni esclusivamente per i collegamenti. Inoltre, alcune fonti hanno affermato che questo deve essere indicato nel codice.
A proposito, quando si impostano gli stili di collegamento, è possibile utilizzare anche i seguenti selettori: collegamento - per le pagine non ancora visitate,: visitate - quelle in cui sei già stato +: attivo definisce l'indirizzo attualmente attivo. È importante posizionare l'effetto hover nei CSS dopo: link e: visitato, se esistono.
Passiamo dalla teoria alla pratica. Di seguito è riportato un elenco di materiali e frammenti utili: seguire i collegamenti per visualizzare le fonti.
Pulsante al passaggio del mouse ed effetti di collegamento
Come abbiamo detto sopra, questa è la categoria di oggetti più popolare sul sito in cui si verifica questa tecnica. Ecco alcune opzioni sull'argomento.
Semplici esempi per i pulsanti
Pulsanti Sullivan
Il trucco è che quando passi con il mouse su diversi pulsanti, oltre a cambiare il colore di sfondo, viene lanciata anche una piccola animazione con icone (e ognuno ha le sue).
Icone CSS al passaggio del mouse
Una selezione di 5 semplici opzioni per implementare l'attività. In tutti i casi vengono utilizzate icone aggiuntive che compaiono a destra/sinistra del testo o lo sostituiscono.
Effetti al passaggio del mouse sui pulsanti
Rispetto all'esempio precedente, queste 12 funzioni trigger sembrano molto più interessanti, sia visivamente che in termini di codice. Non senza JS.
Il navigatore si libra
Alcune modifiche che lo rendono più insolito rispetto alla proprietà di base per la decorazione del testo. Lo sfondo del pulsante è inoltre riempito con diversi effetti visivi.
Informazioni al passaggio del mouse
La funzionalità di descrizione comando è ora supportata in tutti i browser, ma puoi personalizzarla in base alle tue esigenze. Nell'esempio attuale, la pseudo-classe viene attivata per il tag dfn, sembra elegante. Il codice è HTML + CSS abbastanza compatto.
Pulsante mana
Una delle opzioni di effetto hover più originali nei blocchi è che al passaggio del mouse, è come riempirlo di liquido. L'implementazione utilizza CSS, HTML e SVG. Questo frammento sarà sicuramente una manna dal cielo in un determinato argomento dei siti.
Effetti al passaggio del mouse per le immagini
15 trucchi di base
Nonostante il fatto che l'articolo sia stato pubblicato molto tempo fa, i metodi funzionano ancora correttamente. Qui, probabilmente, sono raccolte tutte le possibili trasformazioni tipiche per la grafica: diversi tipi di zoom, rotazioni, sfocatura, b/n, trasparenza, filtri, lucentezza, ecc. Materiale molto utile.
Bellissimi effetti immagine al passaggio del mouse
Una selezione di 30 azioni piacevoli e fluide quando si passa con il mouse su un'immagine. A causa di semplici manipolazioni visive sotto forma di zoom, aggiunta di linee, viene creata una buona impressione complessa. In alcuni punti il titolo aumenta e la breve descrizione "tira su". Un'ottima opzione per un portafoglio.
Animazione al passaggio del mouse Barberpole
A prima vista, l'animazione non è complicata, il che alla fine sembra molto interessante e non standard.
Effetti al passaggio del mouse CSS con rilevamento della direzione
Per una grande selezione di frammenti e codici correlati, dai un'occhiata a questo articolo da css-tricks.com. Tutti questi esempi sono uniti dal fatto che nel processo di lavoro viene determinata la posizione e la direzione del movimento del cursore. Questo, a sua volta, ti consente di creare reazioni abbastanza originali quando passi con il mouse sugli elementi della pagina:
In molte soluzioni sofisticate, Javascript e jQuery per gli effetti al passaggio del mouse possono diversificare notevolmente e migliorare il risultato.
Bontà al passaggio del mouse consapevole della direzione
Riquadri sensibili alla direzione utilizzando il percorso di clip Pure CSS
Cerca il resto dei chip nell'articolo originale.
Animatismo
In questo sviluppo ci sono oltre 100 semplici modi per "animare" immagini o oggetti al passaggio del mouse. Con l'aiuto di queste funzioni puoi implementare diversi aspetti di pulsanti, titoli, testi, icone social, ecc. Ci sono opzioni con la modifica della visualizzazione delle immagini, sovrapposizioni di uno sfondo traslucido.
Il collegamento contiene 7 effetti di intestazione al passaggio del mouse CSS3 - quando, passando il mouse su un'immagine, l'utente vedrà un blocco di informazioni con un titolo, una breve descrizione e un collegamento. Questo non vuol dire che gli esempi siano molto originali, ma aiuteranno sicuramente a diversificare un progetto di contenuto statico.
Librerie CSS Hover
Hover.css
Il progetto con il nome semplice Hover.css contiene una raccolta di effetti CSS3 per collegamenti, pulsanti, blocchi, ecc. È possibile utilizzare il codice già pronto e/o aggiungere le proprie modifiche. Ci sono molte cose interessanti qui: trasformazioni 2D / 3D, lavorare con sfondi e cornici, ombre, icone. La soluzione è disponibile nei formati CSS, LESS e Sass.
Imagehover.css
Un'altra libreria che imposta gli effetti al passaggio del mouse per le immagini: nella versione gratuita troverai 44 opzioni di conversione (il set premium ne contiene 5 volte di più). Anche LESS e SCSS sono supportati qui, questo case pesa solo 19kb. Il sito ha una pagina con una dimostrazione di tutti gli esempi funzionanti. Ci sono molte caratteristiche uniche offerte che non sono state viste sopra.
Il progetto ha più di 30 diverse tecniche per oggetti rotondi e quadrati. Tutti sono abbastanza originali, non ci sono praticamente azioni "a un elemento" semplici sotto forma di un normale zoom / fly-out. Implementato puro compito CSS3 + HTML (più file Scss inclusi). Eccellente compatibilità con Bootstrap 3, c'è documentazione.
Totale. Ci auguriamo che questi effetti css al passaggio del mouse quando passi con il mouse su immagini, blocchi, collegamenti e altri elementi della pagina ti abbiano aiutato a capire questo argomento. Puoi implementare le soluzioni di maggior successo, secondo te, nei tuoi siti, sia che si tratti di collegare una libreria a tutti gli effetti o semplicemente di integrare una versione ridotta del codice.
Se conosci funzionalità e snippet più interessanti, invia loro gli URL nei commenti. E integreremo l'articolo in futuro.
