css3实现iPhone滑动解锁
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有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>> Slide To Unlock</p></body>
</html>
需要说明的是由于按文字裁剪目前只有 webkit 内核可用，所以该效果目前不兼容其他内核浏览器。
css3实现iPhone滑动解锁的更多相关文章
- css3实现渐变的iPhone滑动解锁效果
先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...
- css3做ipone当时的滑动解锁闪亮条
现在一般的登录 注册 什么 的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...
- Swift: 打造滑动解锁文字动画
原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...
- iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- hiho_1054_滑动解锁
题目大意 智能手机九点屏幕滑动解锁,如果给出某些连接线段,求出经过所有给出线段的合法的滑动解锁手势的总数.题目链接: 滑动解锁 题目分析 首先,尝试求解没有给定线段情况下,所有合法的路径的总数.可以使 ...
- hihocoder#1054 : 滑动解锁（深度优先搜索）
描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...
- Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- hihocoder 1054 滑动解锁 dfs
详细分析见滑动解锁分析 AC代码 #include <cstdio> #include <cmath> #include <cctype> #include < ...
- C语言 · 滑动解锁
题目:滑动解锁 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...
随机推荐
- P2105 K皇后
题意:$n*m$棋盘放置k个皇后,问几个格子不被攻击 1≤n,m≤20000,1≤k≤500 开set判重暴力$O(n*k)$然而,setMLE了QAQ 正解确实是$O(n*k)$的 以hang[i] ...
- [POI2014]KUR-Couriers BZOJ3524 主席树
给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. Input 第一行两 ...
- Drop user 报ORA-00600 [KTSSDRP1]
一客户删除一个数据库用户THH时报错: 说明在获取seg$时没有找到相应的条目,先来解释下这个600错误的参数含义: Arg [a] Tablespace number Arg [b] File nu ...
- 用C#写一个函数，在一个数组中找出随意几个值相加等于一个值 与迭代器对比
算法!用C#写一个函数,在一个数组中找出随意几个值相加等于一个值比如,数组{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20} 要找出那些数相加等 ...
- Es6中Map对象和Set对象的介绍及应用
map和set的方法,工作中有使用到,所以学习一下: Map 对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. var myMap = new Map(); myMa ...
- Pandas基本功能详解
Pandas基本功能详解 Pandas Pandas基本功能详解 |轻松玩转Pandas(2) 参考:Pandas基本功能详解 |轻松玩转Pandas(2)
- JQuery判断页面是否按下了Enter键
$('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...
- SQL Server中,varchar和nvarchar如何选择
正常情况下,我们使用varchar也可以存储中文字符,但是如果遇到操作系统是英文操作系统并且对中文字体的支持不全面时, 在SQL Server存储中文字符为varchar就会出现乱码(显示为??)． ...
- 计算机学院大学生程序设计竞赛（2015’12）The collector’s puzzle
Problem Description There is a collector who own many valuable jewels. He has a problem about how to ...
- hdu2068 RPG的错排
RPG的错排 时间限制:1000/1000 MS(Java / Others)内存限制:32768/32768 K(Java / Others)总提交内容:16421接受的提交内容:6670 问题描述 ...