先贴代码

<!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. hadoop-hdfs分布式文件系统

    使用3台机器搭建hdfs完全分布式集群 201(NameNode),202(DataNode),203(DataNode) 整体架构 NameNode(192.168.1.201) DataNode( ...

  2. SQL Server配置管理器的“别名”功能好处，实现内外网统一以及加了端口号导致的限制

    这里主要有两个别名,经过研究,最好两个都配置成一样的,减少排查. 操作: 点击[别名],右键[新建别名] 这里的别名能实现比如我一台远程服务器,加了端口的,如果要实现在SQL登录的时候,使用计算机名来 ...

  3. 利用iconv进行文件编码批量原地转换

    将当前目录及其所有子目录中的以 java 为后缀的文件,从 GB18030 转换为 UTF-8: find .  -name "*.java" -exec sh -c " ...

  4. C语言之函数可变参数

    先上一段代码: #include<cstdarg> #include<iostream> #include<string> using namespace std; ...

  5. hdu 4324 拓扑排序

    题意:给出一堆人的喜爱关系,判断有没有三角恋-_-|| 其实就是判断是否存在三条边的环. 一开始我是这么想的: 先拓扑排序,如果没有环那就直接No 如果有环?挑出环里的任意一个点(拓扑排序结束后不在拓 ...

  6. Uva1624 Knots

    极其鬼畜的题. 初见根本没有思路. 二见根本没有思路. …… 多年(并不)之后突然想到,也许可以用链表模拟. 先用链表把每一个节点串起来,并对有覆盖的地方进行标记. 模拟解锁操作,如果一个节点和它所覆 ...

  7. 第二次作业———“A+B Format”思路与总结

    GitHub链接: https://github.com/zzy19961112/object-oriented "A+B Format" 题目 解题思路: 一开始粗略看这道题,熟 ...

  8. Linux下python升级至2.7

    1. 下载python源码包 wget http://www.python.org/ftp/python/2.7.3/Python-2.7.3.tgz2. 解压 tar -xjf Python-2.7 ...

  9. 高可用与负载均衡（1）之linux系统的数据链路层负载均衡

    preface 在蓝厂就职到时候,每台缓存服务器都能够跑到2G的流量,这么大的流量,有人会问,服务器是不是安装的万兆网卡,no no no,仅仅是3张千兆网卡绑定在一块.万兆网卡的服务器少见,大多数都 ...

  10. C#调用WebService实现天气预报

    http://zhangkui.blog.51cto.com/1796259/497324/ 本文使用Winform (C#)调用互联网上公开的WebServices(http://www.webxm ...