angularjs 滑块验证码 移动端_仿支付宝滑块验证码效果的手机端实现

为了加强验证功能，减少APP的被攻击。队长要求做一个支付宝的滑块验证效果。除了它外观和用户体验上的优秀外，它的安全性并未降低，通过对用户行为的分析保证了安全校验。

通过查找大多数案例都是PC端展示效果，在手机端并不能友好展示。于是参考一位CSND博主的文章进行了一些修改。

展示效果图：

滑块效果的前端实现。涵盖的内容主要： 滑块前端样式(html排版)，滑块的闪光移动效果(CSS3 动画)，以及滑块滑动脚本的编写(javascript 按住，拖动，离开事件的编写。)

备注： 本实例HTML、CSS并无改动，只有 JS 的修改。

HTMl代码

滑动

.slidetounlock{

font-size: 12px;

background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

-webkit-animation:slidetounlock 3s infinite;

-webkit-text-size-adjust:none

}