先贴代码

<!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. 64.GitHub 排名前100的android项目简介

    GitHub Android Libraries Top 100 简介 排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不 ...

  2. 下载Spring的jar包的方法

  3. 树莓派利用PuTTY进行远程登录

    得到树莓派的IP:192.168.199.220 打开PuTTY: 端口为22 选择SSH 点击Open: 输入账号密码:pi/raspberry(注意,在linux下输入密码是看不见的) 如果要使用 ...

  4. Jenkins的Publish Over FTP Plugin插件参数使用

    无论在Windows还是Linux下,都是采用这样方式${WORKSPACE}

  5. 【Beta版本】冲刺-Day7

    队伍:606notconnected 会议时间:12月15日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:修改界面,应用图标 明 ...

  6. JSF JQUERY 使用datepicker

    不推荐使用.可以用primefaces的p:Calendar替代,更换控制使用. 简单使用jquery的datepicker示例: <!doctype html> <html lan ...

  7. JavaScript之闭包

    JavaScript之闭包 在JavaScript中,闭包恐怕是很多人不能理解的一个概念了,甚至很多人也会把闭包和匿名函数混淆. 闭包是有权访问另一个函数作用域中的变量的函数.首先要明白的就是,闭包是 ...

  8. Centos7安装Oracle12c

    环境: CentOS7@VMware12,分配资源:CPU:2颗,内存:4GB,硬盘空间:30GB Oracle12C企业版64位 过程纪要: root身份安装依赖包: compat-libstdc+ ...

  9. android studio中ListView与SQLite的结合使用

    Da.java public class Db extends SQLiteOpenHelper { public Db(Context context) { super(context, " ...

  10. matlab 中txt文件（含字符及数值）处理

    matlab 中txt文件(含字符及数值)处理 (2008-08-02 09:45:12) 转载▼ 标签: 杂谈 分类: matlab及C学习 Matlab文件操作及读txt文件ZZ 2008-07- ...