现在一般的登录 注册 什么  的页面，都是会做个滑动验证。一般都是像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: ;

        margin: ;

    }

    div {

        width: 240px;

        line-height: 30px;

        background: #ececec;

        margin:  auto;

        text-align: center;

    }

    @-webkit-keyframes slidetounlock {

        % {

            background-position: -120px

        }

        % {

            background-position: 120px

        }

    }

    span {

        background: -webkit-gradient(linear, left top, right top, color-stop(, #4d4d4d), color-stop(., #4d4d4d), color-stop(., #fff), color-stop(., #4d4d4d), color-stop(, #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>

效果图

css3做ipone当时的滑动解锁闪亮条的更多相关文章

  1. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  2. Selenium模拟JQuery滑动解锁

    滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...

  3. 【转】Selenium模拟JQuery滑动解锁

    滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...

  4. Python中Selenium模拟JQuery滑动解锁实例

    滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...

  5. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  6. hiho_1054_滑动解锁

    题目大意 智能手机九点屏幕滑动解锁,如果给出某些连接线段,求出经过所有给出线段的合法的滑动解锁手势的总数.题目链接: 滑动解锁 题目分析 首先,尝试求解没有给定线段情况下,所有合法的路径的总数.可以使 ...

  7. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  8. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  9. hihocoder#1054 : 滑动解锁（深度优先搜索）

    描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...

随机推荐

  1. 08-C#笔记-判读语句

    同C++ 支持if.switch.?: 不同之处 1. switch case支持字符. 参考: http://www.runoob.com/csharp/csharp-switch.html htt ...

  2. Win10下默认显示文件的扩展名

    默认不显示文件的后缀名 1.右击此电脑,点击属性 2.点击控制面板主页 3.点击文件资源管理器选项 4.切换到查看选项卡,取消勾选“隐藏已知文件类型的扩展名”,应用->确定 结果:

  3. spring学习3

    spring整合JDBC spring提供了很多模板整合Dao技术 spring中提供了一个可以操作数据库的对象.对象封装了jdbc技术. JDBCTemplate => JDBC模板对象    ...

  4. 填坑 bzoj3337

    算是个板子题吧,就是不知道啥时候能写出来. #include<cstring> #include<iostream> #include<cctype> #inclu ...

  5. mysql数据库去掉字符前/中/后的空格

    近日,业务部门提出给 他们出的报表中有特殊字符,导致其他部门用不了,排查后发现表中该列字段里边有空格导致的,数据总量140w,因数据量较大,暂不考虑直接提sql更新生产数据.近日只考虑下,去除空格的m ...

  6. docker 创建私有镜像之 registry

    一.下载 registry 镜像 [root@localhost ~]# docker pull registry Using default tag: latest latest: Pulling ...

  7. display：none和visibility:hidden

    w3school学习网:https://www.w3school.com.cn/tiy/t.asp?f=hdom_style_display_none display: none----将元素的显示设 ...

  8. python总结七

    1.lpython是python语言的lisp前端,它类似于普通的lisp语言,他会被直接编译成字节码. 2.python中的变量只在哪里需要设置内部变量,在__init__函数中. 3.map()会 ...

  9. Flask项目之login提交

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/11/2 20:53 # @Author : zoulixiang # @Si ...

  10. Yarn和Zookeeper的区别

    Yarn:分布式资源管理器 Zookeeper:分布式协作服务 Zookeeper是一个分布式协调服务(Coordination),一个leader,多个follower组成的集群,就是为用户的分布式 ...