<!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. 十一天 python操作rabbitmq、redis

    1.启动rabbimq.mysql 在""运行""里输入services.msc,找到rabbimq.mysql启动即可 2.启动redis 管理员进入cmd, ...

  2. 解决IDEA自动重置LanguageLevel和JavaCompiler版本的问题

    使用IDEA时,导入的Maven项目默认的LanguageLevel和JavaCompiler都是1.5,1.5的情况下连最简单的@Override注解都不支持,所以项目可能出现一堆错. 虽然在项目上 ...

  3. Unity全屏模糊

    先上效果,左边模糊 其实用的是Unity Stard Effect里的资源,一个脚本一个shader //脚本代码 using UnityEngine; using System.Collection ...

  4. Unity3D 降低IL2CPP编译可执行文件大小

    项目开始使用IL2CPP编译,后果是可执行文件急剧增加. google后发现国外一大神写的方法,原帖在这http://forum.unity3d.com/threads/suggestion-for- ...

  5. sqlserverJDBC驱动链接

    final String DRIVER="com.microsoft.jdbc.sqlserver.SQLServerDriver"; final String URL=" ...

  6. ios企业应用发布流程

    转载自:http://blog.csdn.net/justinjing0612/article/details/8758692留作备忘 企业发布app的 过程比app store 发布的简单多了,没那 ...

  7. VS工程目标文件名设置

    默认的输出文件名是$(ProjectName) 可以在项目属性-配置属性-常规-目标文件名中设置 例如我想在Debug版本的输出文件加一个后缀d,那么我可以这样设置:$(ProjectName)d

  8. [Android Rro] SDK JAR

    cd ../../../outputs/aar/mkdir AAR_VERSIONmkdir JAR_VERSIONmv app-release.aar AAR_VERSION/${project_n ...

  9. Roadblocks（poj 3255）

    题意:给出n个点,m条双向边,求严格次短路. /* 先spfa预处理出起点到每个点的和每个点到终点的最短距离,然后枚举每条边(这条边必须走),计算此时的最短路径,得出严格次短路. 正确性:因为对于一条 ...

  10. XMPP框架下微信项目总结（3）获取点子名片信息（个人资料）更新电子名片

    思路:1 调用方法,添加点子名片模块(名片信息含电话,头像,单位个人信息)等 开启ps:APP发送请求到服务器openfire,服务器返回个人信息,app存储到数据库,app界面需要数据通过数据库获取 ...