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

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

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
完美闭环教学培训课程 打造时代精英人才
学习课程:
学习目的:
学习方式:
优培计划
推荐阅读
学员专访
已有
1180 位
同学申请免费
南京校区:南京市 建邺区 新城科技园 广聚路33号 安科大厦4楼 科迅教育
18724002960
南通校区:南通市 崇川区 人民中路23-6号 新亚大厦3楼 科迅教育
13626271253
上海校区:筹建中... 敬请期待
-
全国咨询电话
400-008-7128
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     南通科迅教育信息咨询有限公司版权所有     Copyright 2008 -
领取学习视频资料
限前30名
您好,您想咨询哪门课程呢?