css3做ipone当时的滑动解锁闪亮条
现在一般的登录 注册 什么 的页面，都是会做个滑动验证。一般都是像IPONE早期那个 滑动开屏的效果 ，这个效果现在可以用CSS3来实现。
主要用到几个属性
background 背景使用渐变属性，
background-clip背景裁剪使用text，这个只能是webkit内核 的浏览器支持了，
text-fill-color 文字填充颜色为透明，
再有一个keyframes来改变背景位置
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3做ipone当时的滑动解锁闪亮条</title>
</head>
<style>
* {
padding: ;
margin: ;
} div {
width: 240px;
line-height: 30px;
background: #ececec;
margin: auto;
text-align: center;
} @-webkit-keyframes slidetounlock {
% {
background-position: -120px
} % {
background-position: 120px
}
} span {
background: -webkit-gradient(linear, left top, right top, color-stop(, #4d4d4d), color-stop(., #4d4d4d), color-stop(., #fff), color-stop(., #4d4d4d), color-stop(, #4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 3s infinite;
-webkit-text-size-adjust: none;
}
</style> <body>
</body>
<div>
<span>请按住滑块，拖动到最右边</span>
</div> <script> </script> </html>
效果图
css3做ipone当时的滑动解锁闪亮条的更多相关文章
- css3实现渐变的iPhone滑动解锁效果
先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...
- Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- 【转】Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- Python中Selenium模拟JQuery滑动解锁实例
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- hiho_1054_滑动解锁
题目大意 智能手机九点屏幕滑动解锁,如果给出某些连接线段,求出经过所有给出线段的合法的滑动解锁手势的总数.题目链接: 滑动解锁 题目分析 首先,尝试求解没有给定线段情况下,所有合法的路径的总数.可以使 ...
- CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
- 5个基于css3超炫的鼠标滑动按钮动画
今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- hihocoder#1054 : 滑动解锁（深度优先搜索）
描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...
随机推荐
- 关于ID命名 一个页面唯一
1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...
- 可怕的Full GC （转自Hbase不睡觉书）
PS:之前做项目的时候,需要做个复杂的查询,大量的查询总是导致hbase集群奔溃,最后定位到时full GC的原因. 以下转自<Hbase不睡觉书>-------------------- ...
- Chrome插件中 popup,background,contentscript消息传递机制
https://blog.csdn.net/summerxiachen/article/details/78698878 popup不能接收到contentscript 发送的消息, 如果这时cont ...
- C语言实现FTP服务器
公共部分代码 /* common.h */ #ifndef COMMON_H #define COMMON_H #include <arpa/inet.h> #include <ct ...
- 有趣的js代码
for ( ; ; ) { window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/ )\n(ノΠU\n何回閉じても無駄ですよ-ww\nm9(^Д^) ...
- 每月IT摘录201911
技术 1.以 MySQL 的 InnoDB 引擎为例,由于 MySQL 中有两套日志机制,一套是存储层的 redo log,另一套是 server 层的 binlog,每次更新数据都要对两个日志进行更 ...
- MySQL 执行插入报错 - Incorrect string value: '\xE4\xB8\xAD\xE6\x96\x87' for column 'name' at row 1
报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致. 使用navica ...
- java dump 内存分析 elasticsearch Bulk异常引发的Elasticsearch内存泄漏
Bulk异常引发的Elasticsearch内存泄漏 2018年8月24日更新: 今天放出的6.4版修复了这个问题. 前天公司度假部门一个线上ElasticSearch集群发出报警,有Data Nod ...
- [转帖]深入理解latch: cache buffers chains
深入理解latch: cache buffers chains http://blog.itpub.net/12679300/viewspace-1244578/ 原创 Oracle 作者:wzq60 ...
- Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call错误
我这边新增的接口之后编译,启动debug后提示这个问题, 在网上找了一段时间,感觉各大神说的都好有道理,但是没有作用 so,尝试对整个工程重新编译(理论上只要重新编译修改的文件影响到的地方)