iPhone 슬라이드 잠금 해제 기능 코드 예제의 CSS3 구현-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

iPhone 슬라이드 잠금 해제 기능 코드 예제의 CSS3 구현

高洛峰

Mar 07, 2017 pm 02:10 PM

css3

이 효과를 구현하는 주요 아이디어는 텍스트에 그라데이션 배경을 추가한 다음 배경을 자르고 텍스트에 따라 자르고(현재는 웹킷 코어 브라우저에서만 이 속성을 지원합니다) 마지막으로 애니메이션을 추가하는 것입니다. background 즉, 배경의 위치를 변경합니다. 배경 애니메이션 효과는 다음과 같습니다. (GIF 녹화 시에는 지연이 있지만 코드 구현 시에는 지연이 발생하지 않습니다.)

iPhone 슬라이드 잠금 해제 기능 코드 예제의 CSS3 구현

최종 효과는 다음과 같습니다.

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>

주의해야 할 점 텍스트로 자르기는 현재 웹킷 커널에서만 사용할 수 있으므로 이 효과는 현재 다른 커널 브라우저와 호환되지 않습니다.

위는 에디터가 소개한 아이폰 슬라이딩 잠금해제 기능을 구현하기 위한 CSS3 코드입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 답변해드리겠습니다. 당신은 시간에. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!

iPhone 슬라이딩 잠금 해제 기능 코드 예제의 CSS3 구현에 대한 자세한 내용과 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사