Ghosting-Effekt wie in bitly.com kopieren Sie Links

Question

Fragen Sie sich, welche Bibliothek kann diese Art von Text Ghosting-Animation machen?

Dank

Answer 1

Haben Sie versucht, das Öffnen der Web-Inspektor und für sich selbst zu sehen, wie bitly.com es tut? Oft ist der beste Weg zu lernen, die Arbeit anderer nachzuahmen.

Wie man sieht es ganz einfach ist. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Element erstellt, dessen einziger Zweck darin besteht, die von Ihnen beschriebene "Ghosting" -Animation bereitzustellen. Dann verschwindet es, wenn die Animation abgeschlossen ist.

Answer 2

Der "Fade Out Top" Effekt von http://cssanimation.io/ scheint ziemlich ähnlich. Sie können "absolute" zwei Ebenen Ihres Textes übereinander positionieren und dann die Animation nur auf einer von ihnen ausführen, um den "Geister" -Effekt zu erzeugen. Hier ist das Original CodePen von cssanimation.io: http://codepen.io/cssanimation/pen/YpPXjR

Und hier ist eine Gabel mit den beiden Schichten wurde ich darauf hindeutet: http://codepen.io/anon/pen/YVNNGw/

<div class="container"> 
     <h1 class="layer1">cssanimation</h1> 
     <h1 class="layer2 cssanimation fadeOutTop">cssanimation</h1> 
</div> 

und die CSS:

body {overflow: hidden;} 
.container { font-family: 'Ubuntu', sans-serif; position: relative; height: 300px; } /* center text styling */ 
h1, .link { font-size: 4.5em; letter-spacing: -4px; font-weight: 700; color: #7e2ea0; text-align: center; } /* h1 styling */ 
@media screen and (max-width: 488px) { h1 { font-size: 2.6em; letter-spacing: -2px; } } /* control h1 font size below 768px screen */ 

/* animation duration and fill mode */ 
.cssanimation { 
    animation-duration: 1s; 
    animation-fill-mode: both; 
    display: inline-block; 
} 

/* fadeOutTop animation declaration & iteration counting */ 
.fadeOutTop { animation-name: fadeOutTop } 

/* fadeOutTop animation keyframes */ 
@keyframes fadeOutTop { 
    from { opacity: 1 } 
    to { 
     opacity: 0; 
     transform: translateY(-100%); 
    } 
} 
.layer1 { 
    position: absolute; 
    z-index: 1; 
    left: 0; 
    top: 0; 
} 
.layer2 { 
    position: absolute; 
    z-index: 2; 
    left: 0; 
    top: 0; 
}