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

    .net中StringBuilder的好处不多说了,下面是js版的StringBuilder var StringBuilder = (function () { function StringBui ...

  2. 树莓派项目（1-2）人脸识别 C++

    级联分类器 在这里,我们学习如何使用objdetect在我们的图像或视频中查找对象 https://docs.opencv.org/3.3.0/db/d28/tutorial_cascade_clas ...

  3. jvm堆、栈、String常量池

    原文地址:http://blog.csdn.net/tophawk/article/details/78704074 程序计数器:它的生命周期与线程相同,线程私有.较小的内存区域,用以完成分支.循环. ...

  4. plv8 + hashids 生成短连接id

    此文章是转载文章的一个学习,稍有改动 环境准备 plv8 环境 version: '3.6' services:  postgres:    image: dalongrong/plv8:2.3.12 ...

  5. django -- ORM建表

    前戏 ORM(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. ORM的优势: ORM解决的主要问题是对象和关系的映射 ...

  6. [THUPC2019]过河卒二（组合数学，容斥原理）

    以后都懒得写题目大意和数据范围了. hz学长的题其实也不那么毒瘤吗.比CDW的好多了 先考虑没有障碍怎么做. 首先发现,答案相当于一个左下角是 $(1,1)$,右上角是 $(n+1,m+1)$ 的棋盘 ...

  7. 设置 npm 源为淘宝镜像

    淘宝 npm 网址 https://npm.taobao.org/ 修改 npm config set registry http://registry.npm.taobao.org/ 还原 npm ...

  8. Leetcode 219. 存在重复元素 II

    说明: 首先,这是一道Easy题,我天!但是题意理解还是很多坑~ 题目描述: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j] ...

  9. 【操作系统之三】Linux下进程间通信-IPC（Inter-Process Communication）

    管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允许无亲缘关系进程间的通信:信号(Sign ...

  10. sql实现MD5加密

    select substring(sys.fn_sqlvarbasetostr(HashBytes('MD5','test')),3,32)