ホームページ > 記事 > ウェブフロントエンド > iPhoneのスライドロック解除機能のCSS3実装コード例

iPhoneのスライドロック解除機能のCSS3実装コード例

高洛峰オリジナル: 2017-03-07 14:10:151430ブラウズ

この効果を実装する主なアイデアは、テキストにグラデーションの背景を追加し、次に背景をトリミングし、テキストに応じてトリミングし (現在、この属性をサポートしているのは Webkit Core ブラウザのみです)、最後にアニメーションを追加することです。背景、つまり、背景と背景アニメーションの位置を変更します。効果は次のとおりです (GIF を記録するときにラグがありますが、コードを実装するときにはラグはありません):

最終的な効果は次のとおりです。以下のように:

iPhoneのスライドロック解除機能のCSS3実装コード例

コード全体は次のとおりです:

<!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 カーネルでのみ利用可能であるため、この効果は現在他のカーネルブラウザーと互換性がないことに注意してください。

上記は、編集者が紹介した iPhone のスライドロック解除機能を実装するための CSS3 コードです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、スクリプトハウスの Web サイトをサポートしていただきありがとうございます。

iPhone のスライドロック解除機能の CSS3 実装コード例については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSでのfloatの使い方を詳しく紹介します。次の記事：CSSでのfloatの使い方を詳しく紹介します。

続きを見る

iPhoneのスライドロック解除機能のCSS3実装コード例

関連記事