CSS手写动画 [英] CSS Handwriting Animation

问题描述

我正在为客户建立一个目标网页，其中的徽标位于中心，而且它们的标语直接位于下方，但是他们希望动词的动画效果看起来好像是手写的。

I'm building a landing page for a client with their logo in the center and their catchphrase directly below - however they want the catch phrase to be animated so that it looks as though it is being handwritten.

我一直在努力与这个天，没有线索如何做 - 如果有人可以帮助我，这将是一个救星！

I have been struggling for days with this and have no clue how to do it - if someone could help me it would be such a lifesaver!

以下是基本的到达网页，其中没有动词：

Here is the basic landing page with no animation on the catchphrase:

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

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

再次，任何帮助都是难以置信的！

Again, any help would be incredible!

推荐答案

我创建了一个 JSFiddle ，这将为你的伎俩。

I've created a JSFiddle of it, that will do the trick for you.

对于这样的效果，使用 HTML5 是非常好的选择，因为你建议使用 canvas 。

And for effect like this, using HTML5 is really good option as you've being suggested to use canvas.

在这里您可以更改 height width canvas 和您的 CSS

Here you can change height & width of canvas and your CSS as per your need.

源： 手写效果 。

这篇关于CSS手写动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！