CSS3實現iPhone滑動解鎖功能代碼範例-css教學-PHP中文網

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

高洛峰

發布： 2017-03-07 14:10:15

原創

1421 人瀏覽過

此效果的主要實現想法是為文字添加漸變的背景，然後對背景進行裁剪，按文字裁剪（目前只有webkit內核瀏覽器支援該屬性），最後為背景添加動畫，即更改背景的位置，背景動畫效果如下（GIF錄製時有卡頓，程式碼實作時不會卡）：

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

最終效果如下：

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

#全部程式碼如下：

<!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中文網！