Diese Frage hat hier bereits eine Antwort:

Ich erstelle eine Zielseite für einen Kunden mit seinem Logo in der Mitte und seinem Slogan direkt darunter. Sie möchten jedoch, dass der Slogan so animiert wird, dass er so aussieht, als ob er handgeschrieben wäre.

Ich habe seit Tagen damit zu kämpfen und habe keine Ahnung, wie es geht - wenn mir jemand helfen könnte, wäre es so ein Lebensretter!

Hier ist die grundlegende Zielseite ohne Animation zum Schlagwort:

<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>

Und das 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;
}

nd eine JS-Geige -https: //jsfiddle.net/9297gefk

Again, jede Hilfe wäre unglaublich!