该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（GIF录制时有卡顿，代码实现时不卡）：
最终效果如下所示：
全部代码如下：
CSS Code复制内容到剪贴板
<!DOCTYPEhtml><html><head><style>p{width:50%;margin:0auto;line-height:50px;font-size:50px;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-color:#19385c;background-image:-webkit-linear-gradient(-45deg,rgba(0,0,0,0.6)30%,#aff0ff50%,rgba(0,0,0,0.6)70%);background-blend-mode:hard-light;background-size:200%;-webkit-animation:shine4sinfinite;}@-webkit-keyframesshine{from{background-position:100%;}to{background-position:0;}}</style></head><body><p>>SlideToUnlock</p></body></html>需要说明的是由于按文字裁剪目前只有 webkit 内核可用，所以该效果目前不兼容其他内核浏览器。
以上所述是小编给大家介绍的CSS3实现iPhone滑动解锁功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
最新文章
热门文章
猜你喜欢
