效果（完整代码在底部）： 实现并不难，都是重复的代码比较多。 实现（可跟着一步一步写）： 1. 先定义基本标签： 2. 定义左右眼的基本css样式： border-bottom: 5px solid

偶然在svgTrick上看到了一个效果，模仿了一下。作者原先也是受到dribble上的一个动效启发，这个效果与svg简直是天作之合。 最后模拟的效果如下，gif有点卡顿，戳戳这里查看网页效果。 我们先看着动效分析一下，主要可以将动画分成五部分。 这个效果的完成很简单。只需要在画…

点的数据是通过getImageData()方法获取的，得到的结果是一串Uint8ClampedArray数据和图片宽高。 imageData.data中的数据每四个数代表一个点。 通过拿到的imageData，获取R通道>0的点，设置该点的(x,y,z)坐标和rgb颜色。 初始…

PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像，从而制作一个…

此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。 1. 前置资源：抛物线运动的物理曲线需要使用Tween.js提供的速度函数 2. 粒子实现 希望在粒子管控组件时，使用new partical的方式创建粒子，每个粒子存在自己的动画开始…

刮刮卡是大家非常熟悉的一种网页交互元素了。实现刮涂层的效果，需要借助canvas来实现，想必每个前端工程师都清楚。实现刮刮卡并不难，但其中却涉及很多知识点，掌握这些知识点，有助于我们更深刻理解原理，对于提升举一反三的能力很有帮助。本期以实现刮刮卡为例，分享下如何科学合理地封装函…