一看 验证码这个既熟悉又常用的功能,一提起来你就会想起各种各样的验证码,一个偶然的机会,就冒出来做个验证码,慢慢的就演变成现在的五福临门验证码。先看一下效果图: 由来 春节前看到一篇关于验证码的文章,动态刷新、滑动验证,这里的动,总感觉没有“动” 加上之前做的游鱼,就想让它动起来,所以最初就是在滑块验证码的基础上,让滑块在外面游动起来 后来支付宝集五福,让我突然感觉可以考虑,五个福字随机掉下来一个在外面游动,然后滑动原位置,正好符合春节的气息 再后来参与了支付宝打印福字的活动,然后就手写了五福,这样不仅是随机五福,还可以随机不同主题的五福了 春节前开始的,前期做了技术验证,春节陆陆续续进行了实现 后来找资料做轨迹校验,断断续续,今天暂时把前端部分发出来,后端验证决定后续再补一篇 下面是个设计效果图: 实现 技术栈:前端nodejs+vue,后端java+redis 滑块验证:vue-drag-drop 游动:animateplus 目前的前端部分演示demo(目前只支持pc端):http://bless.disscode.cn/#/loginSlider 简书地址:https://www.jianshu.com/p/cf3efa01e9ea blog地址:https://dumplingbao.github.io/2021/03/05/bless-01/
demo还需再完善