<!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. DT时代即将到来

    今日,Sort Benchmark 在官方网站公布了 2015 年排序竞赛的最终成绩.其中,阿里云用不到 7 分钟(377 秒)就完成了 100TB 的数据排序,打破了 Apache Spark 的纪 ...

  2. jquery checkbox 限制多选的个数

    2015年11月6日 16:32:49 选中第四个的时候提示超过了3个, 点解alert框取消后, 将最后一个选中的checkbox取消选中 <script> $(document).re ...

  3. 4.kvm克隆虚拟机

    virt-clone 作用简介 virt-clone 主要是用来克隆kvm虚拟机,并且通过 Options.General Option.Storage Configuration.Networkin ...

  4. 7.django之自定义分页记录

    只是大概记录下步骤: 1.表结构: class UserProfile(models.Model): ''' 用户表 ''' user = models.OneToOneField(User,verb ...

  5. nyoj123_士兵杀敌（四）_树状数组_插线求点

    士兵杀敌(四) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战 ...

  6. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  7. Silverlight 动画性能

    通过几个配置可以提高动画性能: Desired Frame Rate 在WEB项目中配置: <div id="silverlightControlHost"> < ...

  8. 表单中Readonly和Disabled的区别(转载)

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...

  9. 【linux】ubuntu stmp服务器配置

    来源:http://blog.itpub.net/786540/viewspace-1002077/ sudo apt-get install sendmail(其中已经包含了sendmail-bin ...

  10. 细谈WEB标准

    最近有些朋友很是疑惑web标准是什么,我在这里先做一个总结,有更好的见解的可以私信给我! 首先切入正题之前先谈一下什么叫DOCTYPE,DOCTYPE是document type(文档类型)的简写,主 ...