现在一般的登录 注册 什么  的页面，都是会做个滑动验证。一般都是像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. 05-cmake语法-message()

    输出错误 message(FATAL_ERROR " FATAL: In-source builds are not allowed. You should create a separat ...

  2. 【Linux】Windows终端远程链接Linux服务器

    一.Windows cmd ssh链接 1.控制面板->程序->启用Telnet客户端 2.输入命令链接 cmd中输入 ssh 账号名@服务器ip地址:端口号 例如: ssh root@1 ...

  3. python基础之四：list、tuple

    一.列表 list # 列表 ''' 类似str,可以进行切片 ''' li = [', [1, 2, 3], 55, 'we all in ', 'Tom', ''] print(li[0:2]) ...

  4. MyBatisSystemException 【exception】

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: ...

  5. SFTP 文件上传下载工具类

    SFTPUtils.java import com.jcraft.jsch.*; import com.jcraft.jsch.ChannelSftp.LsEntry; import lombok.e ...

  6. adb--环境安装

    前戏 我们在做Android自动化的时候,adb命令是必不可少的,比如我们要获取一个包名,使用adb往手机上安装软件,获取activity等等,都要用到adb命令.而模拟器在我们没有手机测试的时候,可 ...

  7. 认识随机函数rand()和srand(unsigned int )

    rand函数 int rand( void ); 函数名:   rand 功   能:   随机数发生器 用   法:   int rand(void); 所在头文件: stdlib.h 函数说明 : ...

  8. java中的Serializable接口

    实现java.io.Serializable 接口的类是可序列化的.没有实现此接口的类将不能使它们的任一状态被序列化或逆序列化. 序列化类的所有子类本身都是可序列化的.这个序列化接口没有任何方法和域, ...

  9. Appium Grid并发测试

    背景 Selenium玩的比较6的同学比较清楚:在Selenium中三大组件中有包含了Selenium Grid,而其作用就是分布式执行测试用例.主要的应用场景在于: 缩短测试执行时间,提高自动化测试 ...

  10. HashMap源码2

    public class test { @SuppressWarnings({ "rawtypes", "unchecked" }) public static ...