css3实现iPhone滑动解锁

原文:http://www.cnphp6.com/archives/63838

该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有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 内核可用,所以该效果目前不兼容其他内核浏览器。

时间: 2024-10-14 02:26:42

css3实现iPhone滑动解锁的相关文章

css3实现渐变的iPhone滑动解锁效果

先贴代码 <!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-c

Swift: 打造滑动解锁文字动画

最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪的小有点炫酷的感觉.于是准备研究一下.木有想到的是居然可以用CAGradientLayer和一个小小的动画就可以实现这个效果."滑动解锁"的效果: 当然啦,首先你需要显示出这个"滑动解锁"的文本.这里咱们就用一个简单的UILabel来解决这个问题. var textExampleLabel: UILabel!

iPhone手机解锁效果&amp;&amp;自定义滚动条&amp;&amp;拖拽--Clone&amp;&amp;窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

手机滑动解锁代码

#region==滑动解锁部分== private bool mousedown;//定义鼠标点击的bool值 private int curx;//定义鼠标点击时的位置X坐标 private void button11_MouseDown(object sender, MouseEventArgs e) { mousedown = true; curx = Cursor.Position.X;//获取点击时的X坐标 } private void button11_MouseUp(object

hihoCoder #1054 滑动解锁

#1054 : 滑动解锁 Time Limit:2000ms Case Time Limit:1000ms Memory Limit:256MB Description 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致,那么手机将解锁.两个点相邻当且仅当以这两个点为端点的线段上不存在尚未经过的点.此外,这条折线还需要至少经过4个点. 为了描述方便,我们给这

hiho_1054_滑动解锁

题目大意 智能手机九点屏幕滑动解锁,如果给出某些连接线段,求出经过所有给出线段的合法的滑动解锁手势的总数.题目链接: 滑动解锁 题目分析 首先,尝试求解没有给定线段情况下,所有合法的路径的总数.可以使用dfs进行搜索.代码如下: void dfs(int row, int col, int cur_len) { visited[row][col] = true; if (cur_len >= 4) { //到达该点时,走过的路径长度大于等于4,则为合法的一个解锁手势 total_count++;

Selenium模拟JQuery滑动解锁

滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017/unlock/ 当我手动点击滑块时,改变的只是样式: 1.slide-to-unlock-handle 表示滑块,滑块的左边距在变大(因为它在向右移动嘛!) 2.Slide-tounlock-progress 表示滑过之后的背景黄色,黄色的宽度在增加,因为滑动经过的地方都变黄了. 除些之外,没其它

jQuery滑动解锁

unlock.js是一款jQuery滑动解锁插件.目前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式.用户需要滑动指定的滑块到指定位置,才能通过验证.unlock.js可以实现这种滑动解锁功能. 查看演示 下载源码 unlock.js插件具有以下特点: 滑动解锁. 尺寸.颜色.字体大小等都可以个性化定制. 完成解锁后会有回调函数,用来触发进一步的数据处理. 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件. <link href="css/

hihocoder#1054 : 滑动解锁(深度优先搜索)

描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致,那么手机将解锁.两个点相邻当且仅当以这两个点为端点的线段上不存在尚未经过的点.此外,这条折线还需要至少经过4个点. 为了描述方便,我们给这9个点从上到下.从左到右依次编号1-9.那么1->2->3是不合法的,因为长度不足.1->3->2->4也是合不法的,因为1->