下面将分享一个用css和javascript模拟手写明信片的动画效果。在写信的过程中，当笔变干的时候 ， 会自动的去浸入墨水；当写错了字，怎么办？没关系，他会划掉重新写。嘿嘿。强大把，现在我们一起来看看他的实现方法以及效果。

第一步：准备HTML代码

首先，我们先创建基本的html代码文件和信的内容：

index.html

第二步：定义CSS样式文件

body {

background: url('bg.jpg') no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#inkwell1 {

bottom: 100px;

left: 140px;

position: fixed;

}

#inkwell2 {

bottom: 100px;

left: 140px;

position: fixed;

visibility: hidden;

}

#letter {

font-family: Comic Sans MS;

font-size: 18px;

font-weight: bold;

margin: 50px auto;

position: relative;

width: 75%;

}

#letter_src {

display: none;

}

第三步：创建javascript文件

window.onload = function(){

// public variables

var vLetter = document.getElementById('letter');

var iSpeedInk = 5;

// other variables

var sText = document.getElementById('letter_src').innerHTML;

var iCurChar = 0;

var sChars = '';

var iCurInk = 0;

var sCurCaret = '';

var sCaret = " ";

var doStep = function () {

// current char

var sChar = sText.charAt(iCurChar);

// default char delay

var iDelay = 32;

if (sChar == '') {

sCurCaret = '';

} else if (sChar == '|') { // we use | symbol to emulate 'error' symbol

sChar = '';

sChars = sChars.substring(0, sChars.length-1);

iDelay = 64;

} else if (sChar == '

var iPos = sText.indexOf('>', iCurChar);

sChar = sText.substring(iCurChar, iPos + 1);

iCurChar = iPos;

} else if (sChar == '&') { // pass html entities

var iPos = sText.indexOf(';', iCurChar);

sChar = sText.substring(iCurChar, iPos + 1);

iCurChar = iPos;

} else if (sChar == '.') { // custom delay in case of . symbol

iDelay = 300;

} else if (sChar == ',') { // custom delay in case of , symbol

iDelay = 100;

} else if (sChar == ' ') { // custom delay in case of space symbol

iDelay = 32;

} else if (iCurChar > 5) {

sCurCaret = sCaret;

}

// expenditure of ink

if (sChar == ' ') {

iCurInk += iSpeedInk;

sChar = '' + sChar;

}

if (document.getElementById('inkwell2').style.visibility == 'visible') {

sCurCaret = sCaret;

document.getElementById('inkwell2').style.visibility = 'hidden';

sChar = '' + sChar;

}

// refresh Ink

if (iCurInk > 160) {

iCurInk = 0;

document.getElementById('inkwell2').style.visibility = 'visible';

iDelay = 1000;

sCurCaret = '';

}

// add current char to chars

sChars += sChar;

// hide the caret at the end of the letter

if (iCurChar == sText.length - 1)

sCurCaret = '';

// update letter with new chars

vLetter.innerHTML = sChars + sCurCaret;

// goto next char

iCurChar++;

// next step

if (iCurChar < sText.length) {

setTimeout(doStep, 20 + iDelay);

}

}

doStep();

};

ok,一起来看看demo吧，也一起提供附件下载。