该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有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. luogu4151 最大XOR和路径

    然后呢这道题其实很简单 我们先考虑一种简单的情况,从1直接走到n(不管怎么走的,反正就是走) 然后就能找到一个路径了 这个走的过程用各种zmj算法都能过 然后呢我们发现如果直接走基本不会得到最优解,考 ...

  2. [SDOI2009]HH的项链 树状数组 BZOJ 1878

    题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链 ...

  3. MPI环境配置

    单机多核配置:https://www.cnblogs.com/shixiangwan/p/6626156.html 多计算机配置:https://blog.csdn.net/WASEFADG/arti ...

  4. EA888发动机系列

    EA888发动机是一个发动机系列,有很多型号,比如从二代机开始,二代机叫做Evolution 2,简称EVO2,分别有CEA:1.8T 横置:CCU:1.8T 纵置:CGM:2.0T横置,CRH:2. ...

  5. react 中文文档案例一 （倒计时）

    1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...

  6. 8.10zju集训日记

    今天的题目比昨天的简单,一开始自己看了一道题意比较难懂的题目,然后看到榜上有人做出的两道不同的题目,然后马上改变目标,金大佬看的题目是一道比较裸的高斯消元,基本上只要模板正确就可以对,于是很快就开始打 ...

  7. Experimental Educational Round: VolBIT Formulas Blitz J

    Description IT City company developing computer games invented a new way to reward its employees. Af ...

  8. spring 通过beanDefinition注册自定义规则的bean

    目的: 扫描某个自定义注解标注的类, 或者自定义xml 为这些类生成spring Bean 基本原理:org.springframework.beans.factory.support.Default ...

  9. aerospike（1）-centos7安装aerospike

    要安装的软件:server和tools 下载地址:https://www.aerospike.com/download/server/4.5.1.5/ server: 1.下载 wget https: ...

  10. oracle序列的缓存

    在高并发的数据库系统中,序列的缓存也要相应的调大.现在看看数据库自己的一个高并发序列的定义. 当我们向数据库发送一个请求时,监听接待,然后oracle会启动一个后台进程(这个进程就是通常所说的数据库并 ...