CSS3實現iPhone滑動解鎖功能程式碼範例

該效果的主要實現思路是給文字添加漸層的背景，然後對背景進行裁剪，按文字裁剪（目前只有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滑動解鎖功能代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對指令碼之家網站的支援！