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 includere 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 è quella 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 per le 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 da un cerchio utilizzando border-radius: in CSS, puoi anche utilizzare il carattere dell'icona per rendere più informativo il pannello a comparsa.
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
Oggi proverai a decorare il tuo sito web o blog bellissimi effetti per le immagini usando i CSS e il normale codice HTML. Sì, solo CSS e codice HTML normale, senza utilizzare il linguaggio di programmazione PHP, JavaScript, jQueri e altri.
Quali possono essere gli effetti suggeriti da me sul sito blog:
- ingrandire e ridurre senza problemi le immagini;
- spostare le immagini verticalmente e orizzontalmente;
- inclinare o ruotare l'immagine;
- arrotondare le immagini;
E anche tali effetti:
- sfocatura, schiarimento, contrasto, seppia;
- transizione graduale dal colore al bianco e nero;
- inversione di colore.
Per utilizzare il codice, devi solo copiare prima il codice principale, quindi il codice dell'effetto e incollarlo, ovviamente, nel tuo blog o sito web.
Codice principale
Questo codice si applica a tutti gli effetti che ti verranno suggeriti di seguito:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) body (background: # 333 ;) .pic (bordo: 10px solido #fff; float: sinistro; altezza: 300px; larghezza: 300px; margine: 20px; overflow: nascosto; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111;)
Tutti gli stili nella classe ".pic" saranno comuni a tutte le immagini. Tutte le immagini hanno un bordo bianco di 10 pixel (linea n. 13). Le stesse dimensioni dell'immagine sono indicate per l'altezza e la larghezza di 300 px (righe # 15, # 16). Il rientro dai blocchi è 20px (riga numero 17). In modo che l'immagine non vada oltre i corridoi specificati, prescriviamo "overflow: nascosto; ". Se non capisci tutto questo, ti consiglio vivamente di leggerlo.
Cominciamo con gli effetti.
1. Effetto "Ingrandimento"
ecco questo codice:
Riga n. 2, specifica il percorso dell'immagine, la cui dimensione è 400 x 400 px.
Nel tuo CSS, incolla questo codice:
/ * ingrandisci l'immagine * / .grow img (altezza: 300px; larghezza: 300px; -webkit-transition: all 1s easy; -moz-transition: all 1s easy; -o-transition: all 1s easy; -ms-transition : andamento tutto 1s; transizione: andamento tutto 1s;) .grow img: hover (larghezza: 400px; altezza: 400px;)
L'immagine è essenzialmente 400 x 400 px, ma la ridimensioneremo per adattarla alla nostra casella 300 x 300 px (righe n. 3 e n. 4).
L'immagine si ridimensiona uniformemente all'immagine originale di 400 x 400 px (righe # 14 e # 15). La proprietà di transizione è responsabile del ridimensionamento graduale, dove è specificato 1 secondo. (Riga # 6 - # 10).
2. Effetto "Riduci"
In effetti, questo è lo stesso codice, solo che devi ridimensionare e l'immagine senza problemi da grandi dimensioni 400 x 400 px fino a 300 x 300 px.
Nel file HTML tra i tag
incolla questo codice:
Nel tuo CSS, incolla questo codice:
/ * rimpicciolisci l'immagine * / .shrink img (altezza: 400px; larghezza: 400px; -webkit-transition: facilita tutti 1s; -moz-transition: facilita tutti 1s; -o-transition: facilita tutti 1s; -ms-transition : andamento di tutti gli 1; transizione: andamento di tutti gli 1;) .shrink img: hover (larghezza: 300 px; altezza: 300 px;)
3. Effetto "spostamento orizzontale"
Questo effetto cambia la posizione del blocco. Cioè, se sposti il cursore su un'immagine, l'immagine si sposterà di lato.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nella riga n. 2, specifica il percorso dell'immagine, la cui dimensione è 600 x 300 px.
Nel tuo CSS, incolla questo codice:
/ * immagine offset orizzontale * / .sidepan img (margin-left: 0px; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; -ms-transition: margin 1s facilità; transizione: margine 1s facilità;) .sidepan img: hover (margine sinistro: -200px;)
Per spostare l'immagine a sinistra, specificare il valore "-200" nella proprietà "margin-left". Se specifichi "200", l'offset sarà a destra.
4. Effetto "Spostamento verticale"
In effetti, questo è lo stesso codice, ma invece della proprietà "margin-left", devi scrivere "margin-top" e l'immagine si sposterà dolcemente al passaggio del mouse.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * Offset verticale dell'immagine * / .vertpan img (margin-top: 0px; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; -ms-transition : andamento margine 1s; transizione: andamento margine 1s;) .vertpan img: hover (margin-top: -200px;)
Se specifichi il valore "200" nelle proprietà "margin-top", l'immagine verrà spostata verso il basso.
5. Effetto "Inclinazione"
Questo effetto ti consentirà di effettuare una leggera rotazione dell'immagine quando ci passi sopra con il mouse.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * inclina l'immagine * / .tilt (-webkit-transition: tutto 0.5s facilita; -moz-transition: tutto 0.5s facilita; -o-transition: tutto 0.5s facilita; -ms-transition: tutto 0.5s facilita; transizione: tutto 0.5s facilita;) .tilt: hover (-webkit-transform: ruotare (-10deg); -moz-transform: ruotare (-10deg); -o-transform: ruotare (-10deg); -ms-transform : ruotare (-10 gradi); trasformare: ruotare (-10 gradi);)
Quando passi il cursore, l'immagine girerà di 10 0 a sinistra (Linea # 11-# 15). Puoi aumentare tu stesso il grado di rotazione.
6. Effetto "Rotazione immagine con rimodellamento"
Questo è il mio effetto preferito. Quando passi il cursore del mouse sull'immagine, fa un cerchio di rotazione, mentre la forma quadrata si trasforma in una rotonda.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * rotazione dell'immagine con cambio di forma * / .morph (-webkit-transition: tutto 0.5s facilita; -moz-transition: tutto 0.5s facilita; -o-transition: tutto 0.5s facilita; -ms-transition: tutto 0.5s facilita facilità; transizione: tutto 0,5s facilità;) .morph: hover (border-radius: 50%; -webkit-transform: ruotare (360deg); -moz-transform: ruotare (360deg); -o-transform: ruotare (360deg ); -ms-transform: ruotare (360deg); transform: ruotare (360deg);)
Il "raggio di bordo" con un valore di "50%" è responsabile dell'arrotondamento degli angoli.
La proprietà di trasformazione è responsabile della rotazione dell'immagine di 360 0.
7. Effetto messa a fuoco immagine
Questo effetto non è insolito, arrotonda semplicemente l'immagine e aumenta lo spessore della cornice.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * focus immagine * / .focus (-webkit-transition: facilità tutti 1s; -moz-transition: facilità tutti 1s; -o-transition: facilità tutti 1s; -ms-transition: facilità tutti 1s; transizione: facilità tutti 1s ;) .focus: hover (border: 70px solid # 000; border-radius: 50%;)
Ecco, penso che tu abbia capito tutto: border è responsabile dello spessore del bordo e border-radius per il raggio dell'arrotondamento.
8. Effetto sfocatura
Quando passi il cursore del mouse su un'immagine chiara, questa diventerà sfocata.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * sfocatura immagine * / .blur img (-webkit-transition: facilità tutti 1s; -moz-transition: facilità tutti 1s; -o-transition: facilità tutti 1s; -ms-transition: facilità tutti 1s; transizione: facilità tutti 1s facilità;) .blur img: hover (-webkit-filter: sfocatura (5px);)
La proprietà "webkit-filter: blur" con parametri 5px è responsabile della sfocatura.
9. Effetto "Immagine in bianco e nero"
Quando passi il cursore del mouse su un'immagine a colori, questa diventa immediatamente in bianco e nero.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * immagine in bianco e nero * / .bw (-webkit-transition: tutto 1s facile; -moz-transition: tutto 1s facile; -o-transition: tutto 1s facile; -ms-transition: tutto 1s facile; transizione: tutto 1s easy;) .bw: hover (-webkit-filter: grayscale (100%);)
Il filtro "webkit-filter: grayscale" con il valore "100%" risponde di quanto rendere l'immagine in bianco e nero. Puoi specificare il tuo valore da 1% a 100%.
10. Effetto "schiarimento"
Un'immagine oscurata diventa più luminosa quando si sposta il cursore del mouse su di essa.
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * schiarisci l'immagine * / .brighten img (-webkit-filter: luminosità (10%); -webkit-transition: tutto 1s facilita; -moz-transition: tutto 1s facilita; -o-transition: tutto 1s facilita; -ms -transition: facilità tutti 1s; transizione: facilità tutti 1s;) brighten img: hover (-webkit-filter: luminosità (100%);)
Inizialmente scurisce l'immagine del "10%" (linea n. 3)
Quando passi il cursore del mouse, illumina l'immagine del "100%" (riga n. 12)
11. Effetto "Seppia"
Anche un effetto piuttosto buono, con il quale l'immagine si trasformerà in tonalità seppia.
Nel tuo CSS, incolla questo codice:
/ * Seppia * / .sepia img (-webkit-transition: facilità tutti 1s; -moz-transition: facilità tutti 1s; -o-transition: facilità tutti 1s; -ms-transition: facilità tutti 1s; transizione: facilità tutti 1s ;) .sepia img: hover (-webkit-filter: seppia (100%);)
12. Effetto "Contrasto"
Penso che il nome stesso suggerisca già che quando si posiziona il cursore sull'immagine, l'immagine diventerà più ricca e contrastante.
Nel file HTML, inserisci tra i tag
Nel tuo CSS, incolla questo codice:
/ * Contrasto immagine * / .contrast img (-webkit-transition: tutto 1s facile; -moz-transition: tutto 1s facile; -o-transition: tutto 1s facile; -ms-transition: tutto 1s facile; transizione: tutto 1s facile facilità;) .contrast img: hover (-webkit-filter: contrasto (185%);)
Attenzione alla riga #11. Se specifichi un valore di "100%", non verranno apportate modifiche. Se la percentuale è maggiore di "100%", ad esempio "185%", l'immagine avrà un contrasto maggiore. Se rendi la percentuale inferiore a "100%", ad esempio "60%", l'immagine svanirà.
13. Effetto "Inversione"
Questo è anche uno dei miei effetti preferiti. Sembra in qualche modo "metallico".
Nel file HTML, inserisci tra i tag
ecco questo codice:
Nel tuo CSS, incolla questo codice:
/ * Inverti l'immagine * / .invert img (-webkit-transition: tutto 1s facile; -moz-transition: tutto 1s facile; -o-transition: tutto 1s facile; -ms-transition: tutto 1s facile; transizione: tutto 1s easy;) .invert img: hover (-webkit-filter: invert (100%);)
Il valore di inversione è impostato da 0% a 100% (riga n. 11).
È tutto! Spero che l'articolo ti sia piaciuto! Se ti piace, clicca mi piace sui social network.
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. Quando passi con il mouse sulla casella di testo, le stelle sullo sfondo iniziano a spostarsi gradualmente di lato. Viene creato l'effetto del volo.
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. "Menina" 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 una riga.
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 con 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 l'animazione CSS e 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 per ogni effetto è stata preparata un'interessante opzione di rollback 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;
-webkit-transition: margine 0.5s facilitato;
-moz-transition: margine di 0,5 secondi di allentamento;
-o-transizione: margine 0.5s 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 lavica, 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: 300px;
margine: 0 automatico;
}
# ex2 img (
altezza: 100px;
larghezza: 300px;
margine: 15px 0;
-webkit-transition: facilità di tutti gli 1;
-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 al testo di essere posizionato 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 si passa sopra di esse, creando 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 gli 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 sopra l'immagine, il livello di trasparenza viene abbassato e l'immagine viene ripristinata al suo aspetto originale, oltre a un leggero bagliore e riflessi (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 (David Walsh).
Effetto dissolvenza in apertura e riflesso CSS
# ex5 (
larghezza: 700 px;
margine: 0 automatico;
altezza minima: 300px;
}
# ex5 img (
margine: 25px;
opacità: 0,8;
bordo: 10px solido #eee;
/ * Transizione * /
-webkit-transition: tutti i 0,5 secondi facilitano;
-moz-transition: tutti gli 0,5 secondi facilitano;
-o-transizione: tutti gli 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.
| 18.02.2016
CSS3 apre possibilità illimitate per i progettisti dell'interfaccia utente e il vantaggio principale è che quasi ogni idea può essere facilmente implementata e implementata senza ricorrere a JavaScript.
È incredibile come le cose semplici possano ravvivare una normale pagina Web, rendendola più accessibile agli utenti. Stiamo parlando delle transizioni CSS3, con le quali puoi consentire a un elemento di trasformarsi e cambiare lo stile, ad esempio, al passaggio del mouse. I nove esempi di animazione CSS3 di seguito aiuteranno a creare un'atmosfera reattiva sul tuo sito, oltre a migliorare l'aspetto generale della pagina con bellissime transizioni fluide.
Per informazioni più dettagliate è possibile scaricare l'archivio con i file.
Tutti gli effetti funzionano utilizzando la proprietà di transizione. transizione- "transizione", "trasformazione") e la pseudo-classe: hover, che determina lo stile dell'elemento quando ci passi sopra con il cursore del mouse (nel nostro tutorial). Per i nostri esempi, abbiamo utilizzato un div di 500x309 pixel, il colore di sfondo originale era # 6d6d6d e il tempo di transizione da uno stato all'altro era di 0,3 secondi.
Corpo> div (larghezza: 500px; altezza: 309px; sfondo: # 6d6d6d; -webkit-transition: all 0.3s easy ;; -moz-transition: all 0.3s easy ;; -o-transition: all 0.3s easy ;; transizione: tutti gli 0,3 secondi facilitano;)
1. Cambia colore al passaggio del mouse
Un tempo, l'implementazione di un tale effetto era un lavoro piuttosto scrupoloso, con calcoli matematici di determinati valori RGB. Per ora, è sufficiente scrivere lo stile CSS, in cui è necessario aggiungere la pseudo-classe: hover al selettore e impostare il colore di sfondo, che sostituirà gradualmente (in 0,3 secondi) il colore di sfondo originale quando si passa con il mouse sul bloccare:
Colore: al passaggio del mouse (sfondo: # 53ea93;)
2. L'aspetto della cornice
Una trasformazione interessante e vivida: una cornice interna che appare uniformemente al passaggio del mouse. Buono per decorare vari bottoni. Per ottenere questo effetto, utilizziamo la pseudo-classe: hover e la proprietà box-shadow con il parametro inset (imposta l'ombra all'interno dell'elemento). Inoltre, dovrai impostare il tratto dell'ombra (nel nostro caso è 23px) e il suo colore:
Bordo: hover (box-shadow: inset 0 0 0 23px # 53ea93;)
3. Oscillare
Questa animazione CSS è un'eccezione poiché la proprietà di transizione non viene utilizzata qui. Invece, abbiamo usato:
- @keyframes è una direttiva di base per la creazione di animazioni CSS fotogramma per fotogramma che ti consentono di fare le cosiddette. storyboard e descrivere l'animazione come un elenco di punti chiave;
- animazione e conteggio delle iterazioni dell'animazione - proprietà per impostare i parametri dell'animazione (durata e velocità) e il numero di cicli (ripetizioni). Nel nostro caso, ripeti 1.
4. Attenuazione
Un effetto dissolvenza è essenzialmente un semplice cambiamento nella trasparenza di un elemento. L'animazione viene creata in due fasi: in primo luogo, è necessario impostare lo stato iniziale di trasparenza su 1, ovvero opacità completa, quindi specificare il suo valore al passaggio del mouse - 0.6:
Dissolvenza (opacità: 1;) .fade: hover (opacità: 0,6;)
Per il risultato opposto, scambia i valori:
5. Aumenta
Per far crescere il blocco al passaggio del mouse, utilizzeremo la proprietà di trasformazione e la imposteremo su scala (1.2). In questo caso, il blocco aumenterà del 20 percento mantenendo le sue proporzioni:
Grow: hover (-webkit-transform: scale (1.2); -ms-transform: scale (1.2); transform: scale (1.2);)
6. Diminuire
Rimpicciolire un elemento è facile quanto ingrandirlo. Se nel quinto paragrafo, per aumentare la scala, avevamo bisogno di specificare un valore maggiore di 1, allora per ridurre il blocco, specifichiamo semplicemente un valore che sarà minore di uno, ad esempio scala (0.7). Ora, al passaggio del mouse, il blocco si ridurrà proporzionalmente del 30 percento della sua dimensione originale:
Shrink: hover (-webkit-transform: scale (0.7); -ms-transform: scale (0.7); transform: scale (0.7);)
7. Trasformazione in un cerchio
Una delle animazioni comunemente usate è un elemento rettangolare che si trasforma in un cerchio al passaggio del mouse. Utilizzando la proprietà CSS border-radius abbinata a: hover e transition, ciò può essere ottenuto senza problemi:
Cerchio: hover (raggio del bordo: 70%;)
8. Rotazione
Un'opzione di animazione divertente consiste nel ruotare un elemento di un certo numero di gradi. Per fare ciò, abbiamo bisogno di nuovo della proprietà di trasformazione, ma con un valore diverso - rotateZ (20deg). Con questi parametri, il blocco verrà ruotato di 20 gradi in senso orario attorno all'asse Z:
Ruota: hover (-webkit-transform: ruotareZ (20deg); -ms-transform: ruotareZ (20deg); trasformare: ruotareZ (20deg);)
9.3D ombra
I progettisti non sono d'accordo sul fatto che questo effetto sia appropriato per il design piatto. Tuttavia, questa animazione CSS3 è molto originale e viene utilizzata anche nelle pagine web. Otterremo un effetto tridimensionale utilizzando le già familiari proprietà box-shadow (creerà un'ombra multistrato) e trasformeremo con il parametro translateX (-7px) (fornirà uno spostamento orizzontale del blocco a sinistra di 7 pixel ):
Threed: hover (box-shadow: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px # 53ea93, 7px 7px # 53-transform: -webkit -7px); trasforma: translateX (-7px);)
Supporto browser
La proprietà di transizione è attualmente supportata dai seguenti browser:
| Browser desktop | |
|---|---|
| Internet Explorer | Supportato da IE 10 e versioni successive |
| Cromo | Supportato dalla versione 26 (fino alla versione 25 funziona con il prefisso -webkit-) |
| Firefox | Supportato dalla versione 16 (nelle versioni 4-15 funziona con il prefisso -moz-) |
| musica lirica | Supportato dalla versione 12.1 |
| Safari | Supportato dalla versione 6.1 (nelle versioni 3.1-6 funziona con il prefisso -webkit-) |
Anche il resto delle proprietà utilizzate in questi esempi, come transform, box-shadow, ecc., è supportato da quasi tutti i browser moderni. Tuttavia, se hai intenzione di utilizzare queste idee per i tuoi progetti, ti consigliamo vivamente di ricontrollare la compatibilità tra browser.
Ci auguriamo che questi esempi di animazione CSS3 ti siano stati utili. Vi auguriamo successo creativo!
