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的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...
随机推荐
- 【NOIP 2009】靶形数独
题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士拿出了他最近发明的“靶 ...
- Window安装TensorFlow- GPU环境
[简述] 关于Window安装TensorFlow- GPU环境的文章我想网站已经有非常多了,但是为什么还要写这篇文章呢,就是被网上的文章给坑了.由于pip install tensorflow-gp ...
- spring boot +Thymeleaf+mybatis 集成通用PageHelper，做分页
controller: /** * 分页查询用户 * @param request * @param response * @return * @throws Exception */ @ ...
- lintcode - 被围绕的区域
class Solution { public: /* * @param board: board a 2D board containing 'X' and 'O' * @return: nothi ...
- storm定时器
package com.example.mail; import org.apache.storm.Config; import org.apache.storm.LocalCluster; impo ...
- Linux内核模块简单示例
1. Linux 内核的整体结构非常庞大,其包含的组件也非常多,使用这些组件的方法有两种: ① 直接编译进内核文件,即zImage或者bzImage(问题:占用内存过多) ② 动态添加 * 模块本身并 ...
- 1.Hibernate框架
1.分层体系结构与持久化 三层体系结构: 分层体系结构: 指的是将系统的组件分隔到不同的层中,每一层中的组件应保持内聚性,并且应大致在同一抽象级 别: 每一层都应与它下面的各层保持 ...
- Java字符串拆分和字符串连接
Java字符串拆分/连接 public class LierString{ //------------------------------------------------------------ ...
- 百度webuploader 上传演示例子
前端代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="baiduWebU ...
- maya2012无法安装卸载激活失败
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...