此效果的主要實現想法是為文字添加漸變的背景,然後對背景進行裁剪,按文字裁剪(目前只有webkit內核瀏覽器支援該屬性),最後為背景添加動畫,即更改背景的位置,背景動畫效果如下(GIF錄製時有卡頓,程式碼實作時不會卡):
最終效果如下:
#全部程式碼如下:
<!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; 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%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%); /*设置渐变的背景,按对角线渐变*/ background-blend-mode: hard-light; /*设置背景为混合模式下的强光模式*/ background-size: 200%; -webkit-animation: shine 4s infinite; /*给背景添加动画改变位置*/ } @-webkit-keyframes shine { from {background-position: 100%;} to {background-position: 0;} } </style> </head> <body><p>> Slide To Unlock</p></body> </html>
需要說明的是由於按文字裁剪目前只有webkit 核心可用,所以該效果目前不相容於其他核心瀏覽器。
以上所述是小編給大家介紹的CSS3實現iPhone滑動解鎖功能代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對腳本之家網站的支持!
更多CSS3實現iPhone滑動解鎖功能代碼範例相關文章請關注PHP中文網!