最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG

类似Tinder和探探的卡片效果的组件，社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果，就是类似我的女神邱淑贞这样。 其实我最早实现这个效果，是在2018年的时候，在weex上实现过一版。原帖请看这里：https://zhuanlan.zhihu…

1）一个是吸边效果。位置判断，然后缓动到目标位置： 2）一个是页面滚动过程中隐藏悬浮球的防抖。 3、touchstart里设置禁止点击以免touch和click事件冲突，同时让transition为none因为跟随手指移动时不需要缓动效果。 4、touchmove中设置悬浮球跟…

去年为联通制作双十一活动，做四个小游戏：‘配对消消乐’、移动拼图、抓娃娃、倒计时。 游戏规则：在指定时间内抓到上图四张卡片为挑战成功。 接下来就是卡片滚动，设置定时器，给卡片模块设置transform 让卡片从右向左匀速移动。 再接着就是点击按钮控制爪子上下移动抓取卡片。 首先…

1. 背景 将网页保存为图片（以下简称为快照），是用户记录和分享页面信息的有效手段，在各种兴趣测试和营销推广等形式的活动页面中尤为常见。 快照环节通常处于页面交互流程的末端，汇总了用户最终的参与结果，直接影响到用户对于活动的完整体验。因此，生成高质量的页面快照，对于活动的传播和…

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…