CSS3-Implementierung eines Codebeispiels für die Funktion zum Entsperren der iPhone-Folie-CSS-Tutorial-php.cn

CSS3-Implementierung eines Codebeispiels für die Funktion zum Entsperren der iPhone-Folie

高洛峰

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

Original

1421 Leute haben es durchsucht

Die Hauptidee bei der Implementierung dieses Effekts besteht darin, dem Text einen Verlaufshintergrund hinzuzufügen, dann den Hintergrund zuzuschneiden, ihn entsprechend dem Text zuzuschneiden (derzeit unterstützen nur Webkit-Kernbrowser dieses Attribut) und schließlich eine Animation hinzuzufügen Hintergrund, das heißt, der Hintergrundanimationseffekt ist wie folgt (es gibt eine Verzögerung bei der Aufnahme von GIF, aber nicht bei der Implementierung des Codes):

CSS3-Implementierung eines Codebeispiels für die Funktion zum Entsperren der iPhone-Folie

Der endgültige Effekt ist wie folgt:

CSS3-Implementierung eines Codebeispiels für die Funktion zum Entsperren der iPhone-Folie

Der gesamte Code lautet wie folgt:

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

Nach dem Login kopieren

Es sollte Bitte beachten Sie, dass dieser Effekt derzeit nicht mit anderen Kernel-Browsern kompatibel ist, da das Zuschneiden nach Text derzeit nur im Webkit-Kernel verfügbar ist.

Das Obige ist der vom Herausgeber eingeführte CSS3-Code zur Implementierung der iPhone-Sliding-Unlock-Funktion. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten rechtzeitig. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!

Weitere Codebeispiele für die CSS3-Implementierung der iPhone-Sliding-Unlock-Funktion und verwandte Artikel finden Sie auf der chinesischen PHP-Website!