该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（GIF录制时有卡顿，代码实现时不卡）：

最终效果：

全部代码如下：

<!DOCTYPE html>

<html>

<head>

    <style>

        p{

            width:50%;

            margin:0 auto;

            line-height:50px;

            font-size:50px;

            text-align:center;

            -webkit-background-clip: text;    /*按文字裁剪*/

            -webkit-text-fill-color: transparent;    /*文字的颜色使用背景色*/    

            background-color:#19385c;    /*设置一个背景色*/

            background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 30%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%);        /*设置渐变的背景，按对角线渐变*/

            background-blend-mode: hard-light;    /*设置背景为混合模式下的强光模式*/

            background-size: 200%;

            -webkit-animation: shine 4s infinite;    /*给背景添加动画改变位置*/

        }

        @-webkit-keyframes shine {

          from {background-position: 100%;}

          to {background-position: 0;}

        }

    </style>

</head>

<body><p>&gt;&nbsp;Slide To Unlock</p></body>

</html>

需要说明的是由于按文字裁剪目前只有 webkit 内核可用，所以该效果目前不兼容其他内核浏览器。

css3实现iPhone滑动解锁的更多相关文章

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

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

  2. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  3. Swift: 打造滑动解锁文字动画

    原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...

  4. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. hiho_1054_滑动解锁

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

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

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

  7. Selenium模拟JQuery滑动解锁

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

  8. hihocoder 1054 滑动解锁 dfs

    详细分析见滑动解锁分析 AC代码 #include <cstdio> #include <cmath> #include <cctype> #include < ...

  9. C语言 · 滑动解锁

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

随机推荐

  1. 数据结构7: 循环链表(约瑟夫环)的建立及C语言实现

    链表的使用,还可以把链表的两头连接,形成了一个环状链表,称为循环链表. 和它名字的表意一样,只需要将表中最后一个结点的指针指向头结点,就形成了一个环. 图1 循环链表 循环链表和动态链表相比,唯一的不 ...

  2. C++基础学习3：输入和输出(cin和cout)

    在C语言中,通常会在采用格式化输入输出函数printf和scanf用于输入或输出数据或信息.在C++语言中,C语言的这一套输入输出库我们仍能使用,但是C++语言又自定义了一套新的.更容易使用的输入输出 ...

  3. [转载]np.where()使用说明

    转载自https://www.cnblogs.com/massquantity/p/8908859.html#4072620 numpy.where() 有两种用法: 1. np.where(cond ...

  4. CRF++使用步骤

    1.将CRF++文件的压缩包解压后添加到java的工程目录下 2.使用前必须生成train.data和test.data 文件并放到crf_learn.exe的同级目录下 3.cmd进入目标位置,其中 ...

  5. js-eval运算符

    js中使用eval运算符需要注意—— eval()只有一个参数 传入的参数是字符串时,才会去解析执行:否则,将直接返回这个参数 作用域与调用它的变量作用域保持一致 返回字符串中最后一个表达式或语句的值 ...

  6. POJ3368

    http://poj.org/problem?id=3368 给出一个升序数组和 q 个查询.对每个查询,返回 a b 之间出现次数最多的那个元素的出现次数. 这一类区间查询的问题很容易想到用线段树来 ...

  7. xshell传输文件到linux

    我们使用xshell来连接linux之后会发现方便了很多~然而使用xshell要怎么把本地文件传到linux上面呢? 1.yum安装一款工具.#yum install  lrzsz -y 2检查是否安 ...

  8. spring boot 系统启动时运行代码（1）-@PostConstruct

    Application.java import org.springframework.boot.SpringApplication; import org.springframework.boot. ...

  9. Python 内置的GUI库tkinter方法在py2和py3中的更改

    参考资料:   https://docs.python.org/3.4/library/tkinter.html#tkinter-moduleshttps://docs.python.org/2.7/ ...

  10. 2.3 Rust函数

    2.3 函数 [root@itoracle src]# cargo new functions Created binary (application) `functions` package [ro ...