Home > Article > Web Front-end > CSS3 implementation of iPhone slide unlock function code example

CSS3 implementation of iPhone slide unlock function code example

高洛峰Original: 2017-03-07 14:10:151422browse

The main idea of implementing this effect is to add a gradient background to the text, then crop the background, crop according to the text (currently only webkit core browsers support this attribute), and finally add animation to the background, that is, change the position of the background. The background animation effect is as follows (there is a lag during GIF recording, but no lag during code implementation):

The final effect is as follows:

CSS3 implementation of iPhone slide unlock function code example

The entire code is as follows:

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

It should be noted that since cropping by text is currently only available in the webkit kernel, this effect is currently not compatible with other kernel browsers.

The above is the CSS3 code to implement the iPhone sliding unlock function introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the Script House website!

For more CSS3 implementation of iPhone sliding unlock function code examples and related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to the usage of float in cssNext article：Detailed introduction to the usage of float in css

See more

CSS3 implementation of iPhone slide unlock function code example

Related articles