仿苹果4滑动解锁样式

2021/11/17 23:12:22

编程Tag： 滑动样式 webkit 解锁 background color position 111 100px

本文主要是介绍仿苹果4滑动解锁样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>

<head>

</head>

<style>

body {

background-color: #111;

}

@keyframes slip {

from {

background-position: 100%;

}

to {

background-position: 0;

}

div {

position: absolute;

width: 700px;

height: 100px;

font-size: 40px;

left: 100px;

top: 100px;

color: transparent;

background-color: #111;

text-align: center;

line-height: 100px;

-webkit-background-clip: text;

background-color: #111;

background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 30%, #ccc 50%, rgba(0, 0, 0, 0.1) 70%);

background-size: 200%;

-webkit-animation: slip 4s infinite;

}

</style>

<body>

<div>滑动来解锁屏幕</div>

</body>

</html>

这篇关于仿苹果4滑动解锁样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！