.slidetounlock{字体大小：12px；背景：-webkit-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),色标(1,#4d4d4d));-webkit-背景剪辑：文本；-webkit-文本填充颜色：透明；-webkit-animation:slidetounlock3s无限;-webkit-text-size-adjust:none}@-webkit-keyframesslidetounlock{0%{background-position:-200px0}100%{background-position:200px0}}，以加强验证功能，减少APP的攻击。队长要求做一个支付宝滑块验证效果。除了出色的外观和用户体验，其安全性也丝毫没有降低，通过对用户行为的分析来保证安全验证。搜索了一下，大部分案例都是在PC端展示的，在手机端无法友好展示。所以参考了CSND博主的一篇文章做了一些修改。原文链接CSDN-Front-endimplementationofAlipaysliderverificationcodeeffect显示效果图：Front-endimplementationofslidereffect。涵盖的内容主要有：滑块前端样式（html排版）、滑块闪动效果（CSS3动画）、滑块滑动脚本编写（javascript按下、拖动、离开事件编写。）备注：本例无改动对HTML和CSS，只有JS修改。HTMl代码滑动.slidetounlock{字体大小：12px；背景：-webkit-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),色标(1,#4d4d4d));-webkit-背景剪辑：文本；-webkit-文本填充颜色：透明；-webkit-animation:slidetounlock3s无限;-webkit-text-size-adjust:none}@-webkit-keyframesslidetounlock{0%{background-position:-200px0}100%{background-position:200px0}}<正文>
