欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3实现iPhone滑动解锁_html/css_WEB-ITnose

程序员文章站 2022-05-31 10:41:13
...
该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码实现时不卡):

最终效果:

全部代码如下:

> Slide To Unlock

需要说明的是由于按文字裁剪目前只有 webkit 内核可用,所以该效果目前不兼容其他内核浏览器。