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的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...
随机推荐
- P3749 [六省联考2017]寿司餐厅 最小割
\(\color{#0066ff}{ 题目描述 }\) Kiana 最近喜欢到一家非常美味的寿司餐厅用餐. 每天晚上,这家餐厅都会按顺序提供 \(n\) 种寿司,第 \(i\) 种寿司有一个代号 \( ...
- luogu4449 于神之怒加强版(莫比乌斯反演)
link 给定n,m,k,计算\(\sum_{i=1}^n\sum_{j=1}^m\gcd(i,j)^k\)对1000000007取模的结果 多组数据,T<=2000,1<=N,M,K&l ...
- POJ1664 放苹果 （母函数）
放苹果 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37515 Accepted: 23090 Description ...
- 「洛谷5017」「NOIP2018」摆渡车【DP，经典好题】
前言 在考场被这个题搞自闭了,那个时候自己是真的太菜了.qwq 现在水平稍微高了一点,就过来切一下这一道\(DP\)经典好题. 附加一个题目链接:[洛谷] 正文 虽然题目非常的简短,但是解法有很多. ...
- P4345 [SHOI2015]超能粒子炮·改
传送门 看到数据和模数大小就知道要上 lucas 了 然后开始愉快地推公式: 答案为 $\sum _{i=0}^kC_{n}^{i}\ (mod\ 2333)$ 设 $f [ i ] [ j ] = ...
- c#缓存帮助类
public static class CacheHelper { static object _lockObj = new object(); private static Dictionary&l ...
- day_06 再谈编码
1. 小数据池(常量池) 1.id() 通过id()查询一个变量在内存中的地址 2.is和== 1.is 判断左右两端内存地址是否一致,如果返回值是TRUE,则可以判断这两个变量值是同一对象 2.== ...
- Python读写操作Excel模块_xlrd_xlwt_xlutils
Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...
- .NET Core单元测试覆盖率统计coverlet配置和使用
https://segmentfault.com/a/1190000017569492 需要使用: 使用 Moq 测试.NET Core 应用 https://www.cnblogs.com/c ...
- 转 python trace walk DEMO
https://blog.csdn.net/steadfast123/article/details/46965125 #quote from 'introduction to computation ...