现在一般的登录 注册 什么  的页面，都是会做个滑动验证。一般都是像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. linux服务器NAT后无法在内网通过外部IP访问内部服务的问题

    场景一: 将外网访问192.168.100.10的80端口转发到192.168.75.5:8000端口. # iptables -t nat -A PREROUTING -d 192.168.100. ...

  2. SVG学习（三）

    _ 阅读目录 一:在SVG中使用样式 二:分组和引用对象 1. 理解 <g> 元素 2. 理解 <use> 元素 3. 理解 <defs> 元素 4. 理解< ...

  3. [KCOJ3393]上马

    题目描述 Description Chicken在IEC(International Equestrianism Competition(国际马术表演赛))惨跪,没有成功的上到马,他深刻的记得他的选手 ...

  4. mysql where/having

    select * from t1 where id<5;select * from t1 where id<5; where 从t1中筛选内容 而having从*中筛选内容

  5. Layui 隐藏左侧菜单

    简单实现 //隐藏菜单 var bl = $("#LAY_app_flexible").hasClass("layui-icon-shrink-right"); ...

  6. IE与标准浏览器对事件处理的区别？（监听、阻止冒泡、阻止默认等）

    谷歌 IE:监听:addEventListener   attachEvent--------要在事件名称前面加on解绑:removeEventListener      detachEvent--- ...

  7. OD(lfdnb)

    由于一场意外,D死了,在此开一个新坑 2019.11.13 考前焦虑 智商为负 有点担心考试状态 2019.11.12 上午考试简直心态爆炸 T1看了一个小时不会 然后看T2,这时候wxy聚聚已经切了 ...

  8. NOIP2019翻车前写(and 抄)过的代码

    咕咕咕.按上传时间升序排列. //树的重心 void dfs(int x) { v[x]=1; size[x]=1; int max_part=0; for(int i=hed[x];i;i=nxt[ ...

  9. PyTorch学习之六个学习率调整策略

    PyTorch学习率调整策略通过torch.optim.lr_scheduler接口实现.PyTorch提供的学习率调整策略分为三大类,分别是 有序调整:等间隔调整(Step),按需调整学习率(Mul ...

  10. log4net按级别写到不同文件

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...