参见英文答案 >
How can I animate the drawing of text on a web page?3个
我正在为客户建立一个登陆页面,其中心标识位于中间,并在下方直接创建标语 – 但是他们希望将短语设置为动画,以使其看起来好像是手写的.
我正在为客户建立一个登陆页面,其中心标识位于中间,并在下方直接创建标语 – 但是他们希望将短语设置为动画,以使其看起来好像是手写的.
我一直在努力奋斗几天,并且不知道如何做到这一点 – 如果有人能帮助我,那将是如此的救星！
这是标语上没有动画的基本登录页面：
<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/
再一次,任何帮助都会令人难以置信！
解决方法
我已经创建了一个
JSFiddle,它将为你做到这一点.
对于这样的效果,使用HTML5是非常好的选择,因为你被建议使用canvas.
在这里你可以改变身高和高度画布宽度和CSS根据您的需要.
资料来源：Handwriting Effect.