Heim >Web-Frontend >CSS-Tutorial >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:151482Durchsuche
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:
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!