首頁  >  文章  >  web前端  >  CSS3實現iPhone滑動解鎖功能代碼範例

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

高洛峰
高洛峰原創
2017-03-07 14:10:151423瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn