先贴代码

<!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:;}

        }

    </style>

</head>

<body><p>&gt;&nbsp;Slide To Unlock</p></body>

</html>

css3实现渐变的iPhone滑动解锁效果的更多相关文章

  1. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  2. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jq实现简单的滑动解锁效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. css3实现iPhone滑动解锁

    该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码 ...

  5. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

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

    原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...

  7. css3 linear-gradient实现购物车地址选择信封效果

    对于css3的渐变前端的童鞋一定不陌生,在一些电商网站会为了美化将地址选择做成信封样式(个人感觉很稀饭~),看了一下它的实现方式,大多数是以图片的形式,持着优化的心态尝试着用css3 linear-g ...

  8. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  9. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

随机推荐

  1. Arraylist Vector Linkedlist区别和用法 (转)

    ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引数据快插入数据慢 ...

  2. Leetcode 376. Wiggle Subsequence

    本题要求在O(n)时间内求解.用delta储存相邻两个数的差,如果相邻的两个delta不同负号,那么说明子序列摇摆了一次.参看下图的nums的plot.这个例子的答案是7.平的线段部分我们支取最左边的 ...

  3. choorme 升级到最新版 adobe flash提示过期解决方案

    进入adobe flash 官网,下载最新版的adobe flash http://labs.adobe.com/downloads/flashplayer.html

  4. Jenkins+CCNET的另类部署图

    最近公司的CI系统升级,从CCNET换成Jenkins进行搭建,原因是Jenkins支持所有语言,不再是单一的dotnet语言支持,并且以节点的形式能做分布式自动构建,非常节省配置成功. 而且从MSB ...

  5. Search and Replace搜寻与替换工具

    一个功能强大的搜寻与替代工具.它可以在同一部硬盘中对所有的文件进行搜寻与替换的功能,也可以对Zip文件中的文件做搜寻,支持特殊字符条件表达式搜寻,或是以脚本文件(Script)做搜寻替换工作,也可以以 ...

  6. phpMyadmin /scripts/setup.php Execute Arbitrary PHP Code Via A Crafted POST Request CVE-2010-3055

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 The configuration setup script (aka scrip ...

  7. koch曲线与koch雪花的MATLAB实现

    代码 % -- function koch(Ax, Ay, Bx, By) % 控制递归深度 Deepth = ; % 控制图画大小 Size = ; + (By-Ay)^) < Deepth ...

  8. Scala Trait

    Scala Trait 大多数的时候,Scala中的trait有点类似于Java中的interface.正如同java中的class可以implement多个interface,scala中的cals ...

  9. selenium 基本的键盘方法

    今晚不想加班,于是赶紧回来看看书: 1.下了selenium的小工具:FireBug/FirePath. 2.确定了看书顺序,我觉得难度低点开始比较好,所以我还是先看基于Python的selenium ...

  10. chmod权限设置

    一.其语法格式为:chmod [who] [opt] [mode] 文件/目录名 1.其中who表示对象,是以下字母中的一个或组合: u:表示文件所有者 g:表示同组用户 o:表示其它用户 a:表示所 ...