<!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. 第七天 面向对象进阶与socket编程

    1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...

  2. centos7删除已经安装的docker

    centos下可以使用yum来删除docker. 列出docker包的具体的名字. $ yum list installed | grep docker docker-engine.x86_64 -0 ...

  3. 3. javacript高级程序设计-基本概念

    1.1 语法 ECMAScript借鉴了C和其他类C语言的语法 1.1.1 区分大小写 ECMAScript中的一切(变量,函数和操作符)都是区分大小写的,变量test和Test是不同的变量 1.1. ...

  4. Shell编程—定时任务

    应用:定时催收,定时下发,对新增内容入库同步, 时间:凌晨 服务器Reahat Linux: Bash HPUX:kbash? #!/bin/sh #!/bin/bash echo awk #输入重定 ...

  5. UVALive 5903 Piece it together（二分图匹配）

    给你一个n*m的矩阵,每个点为'B'或'W'或'.'.然后你有一种碎片.碎片可以旋转,问可否用这种碎片精确覆盖矩阵.N,M<=500 WB  <==碎片 W 题目一看,感觉是精确覆盖(最近 ...

  6. manage account

    #!/bin/bash # #Delete_user - Automates the steps to remove an account # ############################ ...

  7. spfa(模板)

    spfa作为图论中的常用算法,深受各类出题人和各位OIer的喜爱: so,为了给大众创造福利,宝宝在此奉上spfa大发的思路和模板:以感谢社会, 感谢CCF,感谢CCTV, 感谢我的老师,感谢同学们, ...

  8. 【C语言】二维指针做形参

    转自:http://hi.baidu.com/gpmzccqceabimqq/item/f499f057aa1520404eff208b 关键: 传入时强制类型转换 + 使用时自己手工寻址 今天写程序 ...

  9. 108. Convert Sorted Array to Binary Search Tree

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  10. 'XCTest/XCTest.h' file not found

    直接写解决方法吧:在报错的 Target 中的 Building Settings 中 Framework Search Paths 里面添加 $(PLATFORM_DIR)/Developer/Li ...