CSS Animacja pisma ręcznego

Question

Buduję stronę docelową dla klienta z logo na środku i ich hasłem bezpośrednio poniżej - jednak chcą, aby fraza catch była animowana, aby wyglądała tak, jakby była odręczna.

Od wielu dni walczę z tym i nie mam pojęcia, jak to zrobić - gdyby ktoś mógł mi pomóc, byłby to taki ratownik!

Oto podstawowa strona docelowa bez animacji dotyczącej hasłem:

<div class="image-wrapper"> 
<a href="home.html"> 
<img src="http://japesfawcett.com/testsh/images/landing_logo2.png" /> 
</a> 

<div id="test"> 
<p>enter the sunshine state</p> 
</div> 
</div> 

a CSS:

body { 
    background-color: #000; 
} 

@font-face { 
font-family: segoe; 
src: url(fonts/segoesc.ttf); 
} 

div.image-wrapper { 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
} 

.image-wrapper img { 
display: block; 
} 

#test { 
position: absolute; 
top: 100%; 
width: 100%; 
} 

#test p { 
width: 100%; 
font-family: segoe; 
font-size: 18px; 
text-align: center; 
color: #FAEDE8; 
margin-top: -40px; 
} 

a JS Fiddle - https://jsfiddle.net/9297gefk/

Ponownie, każda pomoc będzie być niesamowitym!

Answer 1

Stworzyłem JSFiddle tego, który załatwi sprawę za Ciebie.

A dla takiego efektu, używanie HTML5 jest naprawdę dobrą opcją, ponieważ sugeruje się korzystanie z canvas.

Tutaj możesz zmienić height & width z canvas i swoją CSS jak na swoje potrzeby.

Źródło: Handwriting Effect.