现在一般的登录 注册 什么  的页面，都是会做个滑动验证。一般都是像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. Scrapy笔记12- 抓取动态网站

    Scrapy笔记12- 抓取动态网站 前面我们介绍的都是去抓取静态的网站页面,也就是说我们打开某个链接,它的内容全部呈现出来. 但是如今的互联网大部分的web页面都是动态的,经常逛的网站例如京东.淘宝 ...

  2. C#中的Queue集合

    Queue<T>集合 特点:先进先出,简单来说,就是新添加的元素是顺序添加在集合尾部,但是,移除的时候是从顶部开始移除元素. 三个方法: Enqueue(T obj);//顺序添加一个值到 ...

  3. redis使用摘要

    一.redis使用: 在下载安装好redis后,pycharm内也需要安装redis工具包.cmd窗口运行pip install redis后才可在pycharm 内导入import redis来使用 ...

  4. 《Attack ML Models - 李宏毅》视频笔记(完结)

    Attack ML Models - 李宏毅 https://www.bilibili.com/video/av47022853 Training的Loss:固定x,修改θ,使y0接近ytrue. N ...

  5. manacher算法笔记

    模板 [模板]manacher算法 不妨先只考虑如何求长度为奇数的回文串 记\(P[i]\)表示以\(i\)为中心最多向两边扩展几个字符,满足回文 如串\(ababa\), \(P[1]=0,P[2] ...

  6. 基于ELK 7.50搭建elastalert 监控报警和权限控制

    ELK+监控报警全步骤 需求: 公司要求对出在windows服务器上的日志进行日志分析并根据关键字进行报警,并配置kibana权限控制.下面为详细步骤 环境: centos 7.6 elk版本7.50 ...

  7. AQS2--出队

    队列不卡死,一定要:前面节点变成头结点唤醒时候能够唤醒后面节点,依次类推. 设置前面节点=-1就是为了前面节点走的时候,唤醒自己. 正常没有阻塞节点,设置前面=-1,再旋转一次尝试获取锁,才阻塞.即使 ...

  8. MySQL常见的应用异常记录

    >>Error Code: 1045. Access denied for user 'test'@'%' (using password: YES) 使用MySQL的select * i ...

  9. 【Appium + Python + WebviewH5】之微信小程序自动化测试

    进行调试,打开X5: http://debugmm.qq.com/?forcex5=true http://debugx5.qq.com http://debugtbs.qq.com 一般前两个就可以 ...

  10. 使用另一个版本的glibc

    glibc是Linux系统的核心库,稍有不慎就会导致系统崩溃.如果在程序中必须使用另一版本的glibc,则需要小心从事.具体来言,是在编译时指定--rpath和--dynamic-linker,而在运 ...