css3做ipone当时的滑动解锁闪亮条

现在一般的登录注册什么的页面，都是会做个滑动验证。一般都是像IPONE早期那个滑动开屏的效果，这个效果现在可以用CSS3来实现。

主要用到几个属性

background 背景使用渐变属性，

background-clip背景裁剪使用text，这个只能是webkit内核的浏览器支持了，

text-fill-color 文字填充颜色为透明，

再有一个keyframes来改变背景位置

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3做ipone当时的滑动解锁闪亮条</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 240px;
        line-height: 30px;
        background: #ececec;
        margin: 0 auto;
        text-align: center;
    }

    @-webkit-keyframes slidetounlock {
        0% {
            background-position: -120px 0
        }

        100% {
            background-position: 120px 0
        }
    }

    span {
        background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-animation: slidetounlock 3s infinite;
        -webkit-text-size-adjust: none;
    }
</style>

<body>
</body>
<div>
    <span>请按住滑块，拖动到最右边</span>
</div>

<script>

</script>

</html>

效果图

posted @ 2019-08-08 14:57 H柷H 阅读(317) 评论(0) 编辑收藏举报

h祝h

css3做ipone当时的滑动解锁闪亮条

公告