<!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="img/hovertreecity.jpg"></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 -->

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

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

    体验效果:http://hovertree.com/texiao/html5/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head la ...

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

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

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

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

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

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

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

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

  6. DevExpress中透明玻璃效果

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

  7. DWM 窗体玻璃效果实现

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

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

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

  9. canvas动态小球重叠效果

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

随机推荐

  1. 【小姿势】如何搭建ipa下载web服务器(直接在手机打开浏览器安装)

    前提: 1) 有个一个现成的web服务器,我用是nodejs. 2) 有个能在用你手机安装的ipa 3) 有个github账号 开搞: 1.用http://plist.iosdev.top/plist ...

  2. Oracle备份之RMAN

    1.备份:物理备份时文件层次的备份,逻辑备份时数据层次的备份,物理备份为主,逻辑备份作为补充.物理备份分为用户管理备份和RMAN备份,前者使用SQL命令和OS的cp命令进行文件备份,后者使用RMAN工 ...

  3. python模块名和文件名冲突解决

    对于python初学者,很容易练习到一个随机数生成的程序,代码如下: #!/usr/bin/python import random print(random.randint(12,20)) 这个小程 ...

  4. java 入门 第二季3

    1.继承 1.java是单继承的,一个子类只有一个父类 父类,基类 子类,派生类 2.继承的好处:子类拥有父类的所有属性和方法,属性的修饰符不能是private 3.语法规则: class 子类 ex ...

  5. [Error] Error parsing XML: unbound prefix

    发生该错误的代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  6. js闭包问题

    function picLinkInit(parentClassName, imgW, imgH, childClassObjs) { var $match = $(parentClassName); ...

  7. Mathematics:DNA Sorting(POJ 1007)

    DNA排序 题目大意:给定多个ACGT序列,按照字母顺序算出逆序数,按逆序数从小到大排列 这题其实很简单,我们只要用一个归并排序算逆序数,然后快排就可以了(插入排序也可以,数据量不大),但是要注意的是 ...

  8. simpleTree简单使用

    SimpleTree使用起来比较方便,它实现了最基本的树形菜单的功能,包括1个JS文件.1个CSS文件和5个图标文件. 使用时只要将相关文件复制到项目中,并在相应的页面引用它就行,例如: <!D ...

  9. struts配置文件中如何从一个package的action跳到另一个package中的某个action

    <package name="pack1" namespace="/test1" extends="struts-default"&g ...

  10. xmpp-笔记3

    一.了解XMPP 协议(标准) XMPP 即时通讯协议 SGIP 短信网关协议 这手机发短信 移动支付和网页支付 0x23232[0,1] 0x23232 0x23232 0x23232 只有协议,必 ...