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的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...
随机推荐
- 一些优秀的Firefox扩展
AdBlock Plus 拦截广告. 在对付CSDN等垃圾网站时非常有用. Block Site 拦截你不想看的网站 没有知乎的一天真好... XStyle 设置自己喜欢的CSS样式(表示自己并不会用 ...
- 【NOIP 2009】最优贸易
描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通 ...
- 生成对抗网络（GAN）相关链接汇总
1.基础知识 创始人的介绍: “GANs之父”Goodfellow 38分钟视频亲授:如何完善生成对抗网络?(上) “GAN之父”Goodfellow与网友互动:关于GAN的11个问题(附视频) 进一 ...
- Android----获取包名和sh1
第一种:使用java的一个工具---keytool工具(jdk目录下) SHA1叫安全哈希算法用于签名 keytool -list -v -keystore 签名证书所在位置path 第二种:通过An ...
- java 实现导出Excel文件
java 实现导出Excel(java生成 excel 并导出文件) 经常有有一些数据需要导出成 excel 格式 ,所以就需要实现啦 开始: 1.加入jar poi-3.6-20091214. ...
- ubuntu下中文乱码解决
这个方法只对该用户有效. 方法二:修改/etc/environment,增加以下内容: LANGUAGE=”zh_CN:zh:en_US:en” LANG=zh_CN.GBK
- Linux安全加固--精简启动项
1.关闭不必要的服务 1.1.centos6.x服务操作命令 1.1.1.常用命令 查看服务开启或关闭状态: [root@localhost ~]# chkconfig --list aegis 0: ...
- day16 类之间的关系 特殊成员
类与类之间的关系1.依赖关系(一个对象当另一个对象的参数) 关系最浅, 特殊成员: 1. 类名() 会自动调用 __init__() class Foo: def__init__(self, nam ...
- mongodb在windows下安装
下载地址:https://www.mongodb.com/download-center/community 我下载的是zip版本 新建目录:data |_db |_log cmd到所下载的mongo ...
- Linux防火墙配置学习记录
一.iptables基本原理 1.iptables是一个管理内核包过滤的工具,包含4个表,5个链 表和链被称为Netfilter模块的两个维度, 表提供特定的功能内置四个表: filter表:用于对数 ...