CSS Fade von links nach rechts

Gibt es eine Möglichkeit, Elemente (zumindest nur Text) ein- und auszublenden, die nur mit CSS von links nach rechts oder umgekehrt gehen? HierCSS Fade von links nach rechts

ist ein Beispiel dafür, was ich meine:

enter image description here

Eigentlich, wenn es jQuery erfordert, werde ich akzeptieren, dass auch nur als zweite Priorität.

Quelle

2012-10-02 Bobe

Sie können eine zusätzliche Ebene mit einem Farbverlauf (von weiß bis transparent) verwenden und diese horizontal verschieben, um den gewünschten Effekt zu erzielen. – feeela

@feeela Das ist, was ich dachte, könnte am besten funktionieren, aber ich war mir nicht sicher, wie ich den obigen Effekt erreichen sollte, da die Ebene einfach zurückgehen würde, anstatt weiter in dieselbe Richtung zu gehen. – Bobe

Platziere eine Ebene über dem Text und animiere einen Farbverlauf? Dies könnte funktionieren, aber es ist lange her, seit ich CSS3-Gradienten verwendet habe. – Zeta

Ja, Sie können es mit CSS3-Animationen (check browser support here) tun.

Hier ist eine einfache 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%;} 
}

Wie Sie sehen können, gibt es einen scharfen Kontrast an den Grenzen. Wenn Sie einen Bildgradienten anstelle eines reinen weißen Hintergrunds verwenden, wird es besser gerendert.

Dann können Sie ein jQuery Fallback für IE9 und darunter verwenden.

Quelle

2012-10-02 08:49:50 Giona

Erstellen Sie in Photoshop oder einer anderen Bildbearbeitungssoftware eine kreisförmige Fläche, die in der Mitte transparent ist und nach allen Seiten weiß ausblendet. Fühlen Sie sich frei, um die Oberseite/Unterseite wie benötigt zu beschneiden. Sie können dann CSS-Übergänge verwenden, um die Grafik von links nach rechts zu animieren, um den Effekt in Ihrer Demo zu erzielen. Für Browser wie IE, die keine Übergänge unterstützen, verwenden Sie die Funktion cssHooks in jquery, um die Animationen mit jQuery auszuführen.

Sie könnte schaffen diesen Effekt CSS Steigungen, aber Sie laufen in den Browser Unterstützung Fragen und Übergänge auf CSS-Gradienten verwendet, ist sehr schlecht in Bezug auf Leistung. Das Animieren eines png24 ist jedoch sehr einfach und hat den gleichen Effekt.

Quelle

2012-10-02 08:41:51 Geuis

Antwort

Verwandte Themen