体验效果:http://hovertree.com/texiao/html5/25/

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head lang="zh">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

<meta charset="UTF-8">

<title>HTML5擦玻璃效果 - 何问起</title>

<base target="_blank" />

</head>

<body style="margin: 0; padding: 0;"> <!-- 图片需用本地图片 ，网络图片无效 -->

<div id="box" style="width: 100%; min-height:480px;" data-image-src="hovertreecity.jpg"></div>

<div class="hwqewm"><img src="http://hovertree.com/texiao/html5/25/cbl.png" /><br />扫描二维码在手机查看。<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/m6ycwicd.htm">原文</a></div>

</body>

</html>

<style>

.clean-window-out {

position: relative;

padding: 0;

}

.clean-window-out .window-image, .clean-window-out .window-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.clean-window-out .window-canvas {

z-index: 2;

}

a {

color: white;

}

.hwqewm {

width: 200px;

height: 176px;

position: fixed;

z-index: 99999;

bottom: 0px;

left: 0px;

right: 0px;

margin: 0px auto;

color: white;

}

</style>

<script src="http://hovertree.com/texiao/html5/25/hovertreegrass.js"></script>

<!-- Greate by HoverTree (Sun Mar 27 02:45:46 CST 2016) 43ms -->

关注微信公众号 何问起 ，账号ihewenqi ，或者微信扫描下面二维码关注。然后发送"橡皮擦"查看效果。

参考：使用CSS实现图片磨砂玻璃效果

转自：http://hovertree.com/h/bjaf/m6ycwicd.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

使用canvas实现擦玻璃效果的更多相关文章

  1. 使用canvas实现擦玻璃效果---转载

    <!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport&quo ...

  2. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  3. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  4. DevExpress中透明玻璃效果

    Aero玻璃效果 下图左是DevExpress无玻璃效果,图右是Windows自带玻璃效果. Windows Aero 是从 Windows Vista 开始使用的新型用户界面,透明玻璃感让用户一眼贯 ...

  5. DWM 窗体玻璃效果实现

    我一直盼望着 Windows 新版本的发布.令人感兴趣的事情莫过于浏览 MSDN® 和 SDK 文档,查找一些可以利用和依赖的最新创新,然后让朋友和同事以及您的老板(如果幸运的话)大开眼界.Windo ...

  6. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  7. 又是玻璃效果？调用一句代码就OK了

    原文 http://www.cnblogs.com/lan-mei/archive/2012/05/11/2495740.html 最近自学WPF,网上一查资料,全是依赖属性,路由事件,动画效果等等. ...

  8. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  9. Unity shader学习之Grab Pass实现玻璃效果

    GrabPass可将当前屏幕的图像绘制在一张纹理中,可用来实现玻璃效果. 转载请注明出处:http://www.cnblogs.com/jietian331/p/7201324.html shader ...

随机推荐

  1. ABP理论学习之事件总线和领域事件

    返回总目录 本篇目录 事件总线 定义事件 触发事件 处理事件 句柄注册 取消注册 在C#中,我们可以在一个类中定义自己的事件,而其他的类可以注册该事件,当某些事情发生时,可以通知到该类.这对于桌面应用 ...

  2. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  3. 迷你MVVM框架avalon在兼容旧式IE做的努力

    很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...

  4. CentOS6编译安装PHP7+Nginx

    本文属于动手搭建PHP开发环境的一部分,更多点击链接查看. 本文以centos6为例. 安装PHP 下载 http://cn2.php.net/distributions/php-5.6.22.tar ...

  5. Content-Type List

    Content-Type List Description of Data Content Typical Filename Extensions MIME type/subtype       Te ...

  6. Zabbix实现微信报警

    一.  申请企业微信账号,申请地址 https://qy.weixin.qq.com/ 二. 登陆企业微信账 图一 图二 2.添加微信账号 图一 图二 完成以上步骤后 就完成了微信账号的添加 三.新建 ...

  7. IL指令汇总

    名称 说明   名称 说明 Add 将两个值相加并将结果推送到计算堆栈上.   Ldelem.I1 将位于指定数组索引处的 int8 类型的元素作为 int32 加载到计算堆栈的顶部. Add.Ovf ...

  8. Leetcode-268 Missing Number

    #268.  Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find ...

  9. Java内部类的定义和使用

    为什么要用到内部类: 在java开发学习中我们经常会碰到内部类.内部类又有很多的优势:首先举一个简单的例子,如果你想实现一个接口,但是这个接口中的一个方法和你构想的这个类中的一个方法名称参数相同,你应 ...

  10. MongoDB 使用Index

    Index 能够提高查询的性能,如果没有Index,MongoDB必须扫描整个collection,从collection的第一个doc开始,直到最后一个doc,即使第一个doc之后的所有doc都不满 ...