css3實現iPhone滑動解鎖

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css3實現iPhone滑動解鎖

css3實現iPhone滑動解鎖

編輯：CSS詳解

該效果的主要實現思路是給文字添加漸變的背景，然後對背景進行裁剪，按文字裁剪（目前只有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>&gt;&nbsp;Slide To Unlock</p></body>
</html>

需要說明的是由於按文字裁剪目前只有 webkit 內核可用，所以該效果目前不兼容其他內核浏覽器。

CSS詳解

CSS icon圖標之純CSS實現帶動畫效果的天氣圖標: CSS3動畫屬性並不是很多，但重點其實是你怎樣去運用它，從簡單的hover狀態或復雜的小動畫，都可
理解繼承屬性及應用: 4.5 繼承在本書的[3.3.2繼承與層疊]一節曾經簡要介紹過繼承：(X)H
DIV定位單元中三大元素的控制: 你對DIV定位單元的控制方式是否熟悉，這裡和大家分享一下，主要包括寬度，高度和可見性三部分內容，在

DIV CSS 佈局教程網

相關文章