|
|
这篇文章主要介绍了canvas版人体时钟的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
不知道老网民们还记不记得这个魔性的时钟插件：
2021012915480027.gif
作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘。
十年后的今天，flash在各个浏览器都已经不再支持，已经是个不再那个只会用脚本打扮QQ空间的我，自然得用青春换来得技术还原一下自己的青春记忆。
首先感谢原作者提供的如此优秀好玩的插件： http://chabudai.org/blog/?p=59
这次为了图方便，就直接那pixi.js来上手做动画了，动画素材来源于油管视频，拿到PS逐帧抠图并导出，这个过程就不再详细介绍了。合成后的精灵图以及对应的json文件我会放在文章末尾。
核心的API是PIXI.AnimatedSprite。
代码也是很短，就直接放到下面了
HoneHoneClock
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: lightcyan;
}
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
完整代码戳这里
在线演示1 、 在线演示2
到此这篇关于canvas版人体时钟的实现示例的文章就介绍到这了,更多相关canvas人体时钟内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ |
|
[复制链接]
发表于 2021-1-29 15:51:37