欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
【科迅干货】HTML5汉子书写笔画特效
【科迅干货】HTML5汉子书写笔画特效
浏览量:720
时间:2019/5/31
类别:技术交流

今天我们来分享一款模拟汉字书写笔画特效果,我们先看图:

1.png

2.png

这款效果的代码比较少,我们直接上代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>HTML5 汉字书写笔画特效 </title>

 

<script src="js/hanzi-writer.min.js"></script>

<script src="js/polyfill.min.js"></script>

 

</head>

<body>

 

<div id="character-target-div"></div>

<button id="animate-button">重写</button>

<script>

var char = '你好世界',

writer = [];

for(var x = 0; x < char.length; x++) {

writer.push(writeChar(char[x]))

}

 

function writeChar(char) {

return HanziWriter.create('character-target-div', char, {

width: 100,

height: 100,

padding: 5,

showOutline: true

});

}

document.getElementById('animate-button').addEventListener('click', function() {

if(writer.length > 0) {

writer.map(function(w) {

w.animateCharacter()

})

}

});

</script>


</body>

</html>

这个用到js文件一起在附件里,那么我们下期再见了

77
南京校区:南京市建邺区新城科技园广聚路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     科迅教育版权所有     Copyright 2008 -
领取学习视频资料
限前100名
您好,您想咨询哪门课程呢?