此效果的主要實現想法是為文字添加漸變的背景，然後對背景進行裁剪，按文字裁剪（目前只有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中文網！
