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

我已經創建了它的JSFiddle，這將爲你做的伎倆。

對於這樣的效果，使用HTML5是非常好的選擇，因爲您建議使用canvas。

在這裏，你可以改變的canvasheight & width和你CSS根據自己的需要。

來源：Handwriting Effect。