<!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. ios Coredata 的 rollback undo 等事物处理函数

    首先说明 ios 中 NSManagedObjectContext 默认的 undoManager是nil的,就是说 undo 和 redo 都是没用的. 但是 rollback函数和reset函数是 ...

  2. ASM:《X86汇编语言-从实模式到保护模式》第13章：保护模式下内核的加载，程序的动态加载和执行

    ★PART1:32位保护模式下内核简易模型 1. 内核的结构,功能和加载 每个内核的主引导程序都会有所不同,因为内核都会有不同的结构.有时候主引导程序的一些段和内核段是可以共用的(事实上加载完内核以后 ...

  3. Greedy:Graveyard Design(POJ 2100)

    墓地 题目大意,给定一个整数,要你找出他的平方和组合 太简单了....不过一开始我储存平方和想降低时间,后来发现会超内存,直接用时间换空间了,游标卡尺法 #include <iostream&g ...

  4. ORACLE、MYSQL的JDBC配置

    info.jdbc.driverClassName=oracle.jdbc.driver.OracleDriver info.jdbc.url=jdbc:oracle:thin:@192.168.18 ...

  5. Android 启动白屏或者黑屏闪现解决

    1.设置Style //1.设置背景图Theme <style name="Theme.AppStartLoad" parent="android:Theme&qu ...

  6. 【processing】小代码4

    translate(x,y);  移动坐标原点到x,y处 rotate(angle); 坐标沿原点顺时针转动angle度 scale(n); 绘制图像放大n倍 pushMatrix() 将当前坐标压入 ...

  7. UVA 10815 Andy's First Dictionary ---set

    题目链接 题意:输入一个文本,找出所有不同的单词(连续的字母序列),按字典序从小到大输出.单词不区分大小写. 刘汝佳算法竞赛入门经典(第二版)P112 #include <iostream> ...

  8. odoo注销后在登录时的用户名和密码

    初识odoo时会遇到注销后无法登陆的情况,一般原因是没有留意管理员邮件地址和对应的密码所致.初始情况下默认的邮件地址为admin,密码为数据库创建时提供的密码.

  9. 完美解决：Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch=x

    如题: 原因:没有配置resolv.conf 解决方法: 到/etc目录下配置resolv.conf加入nameserver IP,如: nameserver 8.8.8.8nameserver 8. ...

  10. 数独检测器：帝国理工C++作业

    #include <fstream> #include <vector> #include <iostream> #include <string> u ...