Maison > Article > interface Web > Implémentation CSS3 de l'exemple de code de fonction de déverrouillage par diapositive iPhone

Implémentation CSS3 de l'exemple de code de fonction de déverrouillage par diapositive iPhone

高洛峰original: 2017-03-07 14:10:151423parcourir

L'idée principale de la mise en œuvre de cet effet est d'ajouter un arrière-plan dégradé au texte, puis de recadrer l'arrière-plan, de le recadrer en fonction du texte (actuellement, seuls les navigateurs principaux du webkit prennent en charge cet attribut), et enfin d'ajouter une animation au arrière-plan, c'est-à-dire changer la position de l'arrière-plan. L'effet d'animation d'arrière-plan est le suivant (il y a un décalage lors de l'enregistrement du GIF, mais pas lors de l'implémentation du code) :

Implémentation CSS3 de lexemple de code de fonction de déverrouillage par diapositive iPhone

L'effet final est le suivant :

Implémentation CSS3 de lexemple de code de fonction de déverrouillage par diapositive iPhone

L'intégralité du code est la suivante :

<!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>

Il devrait Il convient de noter que puisque le recadrage par texte n'est actuellement disponible que dans le noyau du webkit, cet effet n'est actuellement pas compatible avec les autres navigateurs du noyau.

Ce qui précède est le code CSS3 pour implémenter la fonction de déverrouillage coulissant de l'iPhone introduite par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. vous à temps. Je tiens également à vous remercier tous pour votre soutien au site Script House !

Pour plus d'exemples de code d'implémentation CSS3 de la fonction de déverrouillage coulissant de l'iPhone, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée à l'utilisation de float en CSSArticle suivant：Introduction détaillée à l'utilisation de float en CSS

Articles Liés

Voir plus