Heim > Artikel > Web-Frontend > CSS3-Implementierung eines Codebeispiels für die Funktion zum Entsperren der iPhone-Folie

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

高洛峰Original: 2017-03-07 14:10:151387Durchsuche

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in die Verwendung von Float in CSSNächster Artikel：Detaillierte Einführung in die Verwendung von Float in CSS

In Verbindung stehende Artikel

Mehr sehen