CSS3 implementation of iPhone slide unlock function code example-CSS Tutorial-php.cn

CSS3 implementation of iPhone slide unlock function code example

高洛峰

Release： 2017-03-07 14:10:15

Original

1481 people have browsed it

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):

CSS3 implementation of iPhone slide unlock function code example

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>

Copy after login

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!