现在一般的登录 注册 什么 的页面，都是会做个滑动验证。一般都是像IPONE早期那个 滑动开屏的效果 ，这个效果现在可以用CSS3来实现。
主要用到几个属性
background 背景使用渐变属性，
background-clip背景裁剪使用text，这个只能是webkit内核 的浏览器支持了，
text-fill-color 文字填充颜色为透明，
再有一个keyframes来改变背景位置
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css3做ipone当时的滑动解锁闪亮条</title> </head> <style> * { padding: 0; margin: 0; } div { 240px; line-height: 30px; background: #ececec; margin: 0 auto; text-align: center; } @-webkit-keyframes slidetounlock { 0% { background-position: -120px 0 } 100% { background-position: 120px 0 } } span { 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; } </style> <body> </body> <div> <span>请按住滑块，拖动到最右边</span> </div> <script> </script> </html>
效果图
