Dissolvenza CSS da sinistra a destra

C'è un modo per sfumare gli elementi (almeno solo il testo) dentro e fuori andando da sinistra a destra o viceversa usando solo i CSS?Dissolvenza CSS da sinistra a destra

Ecco un esempio di ciò che intendo:

enter image description here

In realtà, se richiede jQuery, io accettare che anche, proprio come una seconda priorità.

fonte

2012-10-02 Bobe

È possibile utilizzare un livello aggiuntivo contenente una sfumatura (da bianco a trasparente) e spostare tale livello orizzontalmente per ottenere l'effetto desiderato. – feeela

@feeela Questo è quello che pensavo potesse funzionare meglio, ma non ero sicuro di come ottenere l'effetto sopra, dato che lo strato tornerebbe indietro invece di continuare a muoversi nella stessa direzione. – Bobe

Posiziona un livello sopra il testo e anima una sfumatura? Questo potrebbe funzionare, tuttavia è passato molto tempo da quando ho usato i gradienti CSS3. – Zeta

Sì, lo si può fare con animazioni CSS3 (check browser support here).

Ecco un semplice demo for text-fading.

HTML:

<div class="text"> 
There is some text here! 
<div class="fadingEffect"></div> 
</div>

CSS:

.text { 
    position:relative; 
    line-height:2em; 
    overflow:hidden; 
} 
.fadingEffect { 
    position:absolute; 
    top:0; bottom:0; right:0; 
    width:100%; 
    background:white; 
    -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */ 
    -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */ 
    -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */ 
    -o-animation: showHide 5s ease-in alternate infinite; /* Opera */ 
    animation: showHide 5s ease-in alternate infinite; 
} 
@-webkit-keyframes showHide { /* Chrome, Safari */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-moz-keyframes showHide { /* FF */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-ms-keyframes showHide { /* IE10 */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-o-keyframes showHide { /* Opera */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@keyframes showHide { 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
}

Come potete vedere, c'è un netto contrasto sui bordi. Se usi una sfumatura di immagine invece di uno sfondo bianco puro, renderà il rendering migliore.

Quindi, è possibile utilizzare un fallback jQuery per IE9 e versioni precedenti.

fonte

2012-10-02 08:49:50 Giona

In Photoshop o in altri software di modifica delle immagini, creare un'area circolare trasparente al centro e su tutti i lati sfuma fino al bianco fisso. Sentiti libero di ritagliare la parte superiore/inferiore in base alle esigenze. Puoi quindi utilizzare le transizioni css per animare l'immagine da sinistra a destra per ottenere l'effetto nella tua demo. Per i browser come IE che non supportano le transizioni, utilizzare la funzione cssHooks in jquery per eseguire le animazioni con jQuery.

È potrebbe creare questo effetto utilizzando gradienti CSS, ma si esegue in problemi di supporto del browser, e utilizzando le transizioni su pendenze CSS è molto male in termini di prestazioni. Tuttavia, animare semplicemente un png24 è molto semplice e fa lo stesso effetto.

fonte

2012-10-02 08:41:51 Geuis

Dissolvenza CSS da sinistra a destra

risposta

Problemi correlati