CSS手写动画

Question

我正在为一个客户建立一个登录页面，他们的徽标在中心，他们的标语直接在下面-但是他们希望标语是动画的，这样它看起来就像是手写的。

我已经为此挣扎了几天，完全不知道该怎么做--如果有人能帮助我，那将是我的救星！

这是基本的登录页面，没有关于流行语的动画：

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

和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;
}

和一个JS小提琴- https://jsfiddle.net/9297gefk/

再说一次，任何帮助都是不可思议的！

Answer 1

我已经创建了它的，这将为您做这个把戏。

对于这样的效果，使用HTML5是一个很好的选择，因为有人建议您使用canvas。

在这里您可以根据需要更改canvas的height & width和您的CSS。

源：。