使用canvas实现擦玻璃效果

体验效果:http://hovertree.com/texiao/html5/25/

效果图:


代码如下:

<!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="hovertreecity.jpg"></div> 
<div class="hwqewm"><img src="http://hovertree.com/texiao/html5/25/cbl.png" /><br />扫描二维码在手机查看。<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/m6ycwicd.htm">原文</a></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 -->

关注微信公众号 何问起 ,账号ihewenqi ,或者微信扫描下面二维码关注。然后发送"橡皮擦"查看效果。


参考:使用CSS实现图片磨砂玻璃效果

转自:http://hovertree.com/h/bjaf/m6ycwicd.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

转载于:https://www.cnblogs.com/roucheng/p/canvasglass.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/458935.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何计算时间复杂度

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 求解算法的时间复杂度的具体步骤是&#xff1a; ⑴ 找出算法中的基本语句&#xff1b;…

linux显示系统信息软件下载,linux查看系统信息软件安装信息命令学习笔记

查看LINUX安装版本[rootlocalhost etc]# unameLinux[rootlocalhost etc]# uname -aLinux localhost.localdomain 2.6.32-279.11.1.el6.i686 #1 SMP Tue Oct 16 14:40:53 UTC 2012 i686 i686 i386 GNU/Linux[rootlocalhost etc]# cat /proc/versionLinux version 2.6.32-279.11.…

Bzoj 2662: [BeiJing wc2012]冻结 dijkstra,堆,分层图,最短路

2662: [BeiJing wc2012]冻结 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 647 Solved: 348[Submit][Status][Discuss]Description “我要成为魔法少女&#xff01;” “那么&#xff0c;以灵魂为代价&#xff0c;你希望得到什么&#xff1f;” “我要将有关魔法和奇…

[转]opencv学习资料

转自&#xff1a;http://blog.csdn.net/poem_qianmo/article/details/20537737 1&#xff1a;Mat imread(const string& filename, intflags1 ); eg: Mat image0imread("dota.jpg",CV_LOAD_IMAGE_ANYDEPTH | CV_LOAD_IMAGE_ANYCOLOR);//载入最真实的图像 ge1i…

linux servlet 乱码问题,Servlet一次乱码排查后的总结

由来在写一个小小的表单提交功能的时候&#xff0c;出现了乱码&#xff0c;很奇怪request上来的参数全部是乱码&#xff0c;而从数据库查询出来的中文显示到页面正常&#xff0c;锁定肯定是request对象那里出了问题。后来经过排查&#xff0c;发现是我封装的框架中出了问题&…

C/C++回调函数

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 对于很多初学者来说&#xff0c;往往觉得回调函数很神秘&#xff0c;很想知道回调函数…

Linux 命令[2]:mkdir

make directories mkdir -p [目录名] -p 递归创建 [rootlocalhost ~]# mkdir -p test [rootlocalhost ~]# ls anaconda-ks.cfg install.log install.log.syslog test 当然只创建一个目录 -p 是可以省略的 注&#xff1a;如果创建多级目录没有 -p 会报错 如&#xff1a; [roo…

jQuery动态设置样式List item

前段时间&#xff0c;Insus.NET有修改一个功能《激活当前视图菜单高亮呈现》http://www.cnblogs.com/insus/p/5287093.html 今天Insus.NET想改用另外一个方法来实现&#xff0c;使用jQuery。在ASP.NET MVC 环境实现&#xff1a; 代码&#xff1a; <ul><li><a hr…

linux telnet 权限,允许telnet 通过root用户进行访问

允许telnet 通过root用户进行访问RHEL6:[rootclovem ~]# yum install telnet-server -y //安装telnet服务端[rootclovem ~]# cat /etc/xinetd.d/telnet //开启telnet的托管服务# default: on# description: The telnet server serves telnet sessions; it uses \#unencrypt…

TOUGHRADIUS 项目介绍

2019独角兽企业重金招聘Python工程师标准>>> TOUGHRADIUS 项目介绍 ToughRADIUS是一个开源的Radius服务软件&#xff0c;采用于 Apache License 2.0 许可协议发布&#xff0c;从创立之日起&#xff0c;他的宗旨就是服务于中小微ISP&#xff0c;让运营变得更简单。 T…

转:Jmeter 用户思考时间(User think time),定时器,和代理服务器(proxy server)...

在负载测试中需要考虑的的一个重要要素是思考时间&#xff08;think time&#xff09;&#xff0c; 也就是在两次成功的访问请求之间的暂停时间。 有多种情形挥发导致延迟的发生&#xff1a; 用户需要时间阅读文字内容&#xff0c;或者填表&#xff0c;或者查找正确的链接等。未…

linux sql语句传参数,Linux/Unixshell参数传递到SQL脚本

在数据库运维的过程中&#xff0c;Shell 脚本在很大程度上为运维提供了极大的便利性。而shell 脚本参数作为变量传递给SQL以及SQL脚本也是DB在数据库运维的过程中&#xff0c;Shell 脚本在很大程度上为运维提供了极大的便利性。而shell 脚本参数作为变量传递给SQL以及SQL脚本也…

Myeclipse5.5获取注册码

2019独角兽企业重金招聘Python工程师标准>>> import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class MyEclipseGen {private static final String LL "Decompiling this copyrighted software is a vi…

虚函数和纯虚函数的区别

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 首先&#xff1a;强调一个概念 定义一个函数为虚函数&#xff0c;不代表函数为不被实…

工作日志WebRoot--编辑页关于处理两个关联的选择框

案例&#xff1a;点击编辑&#xff0c;弹出界面后每个栏目都有一个默认的数值&#xff0c;但若其中一个选择框发生更改&#xff0c;则触发另一选择框内的数据发生变动&#xff08;例如组织机构选择发生变动&#xff0c;则相对应的组织机构的下属机构也发生变动&#xff09;。 解…

linux下r语言画图,linux命令行下使用R语言绘图实例讲解

使用系统&#xff1a;centos 6.4 64bit在R语言中可以使用png()等函数生成图片&#xff0c;例如&#xff1a; png("aa.png")可以生成图片。但是如果你是通过shell远程连接到系统上&#xff0c;可能会碰到如下错误&#xff1a;> png("aa.png")错误于.Exte…

Windows Mobile Gprs连接与数据传输

此模块分两部分完成&#xff0c;传输数据用socket &#xff0c;要使用socket在ppc上进行数据传输&#xff0c;就要谁让ppc自动连接gprs 。其中套接字和gprs链接分别进行说明。 一 &#xff0c;应用程序在进行其它所需的Windows Sockets API调用需要进行一次成功的WSAStartup()调…

C语言变量的类型和存储位置

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 1. C语言变量主要分为全局变量、静态全局变量、局部变量、静态局部变量和寄存器变量。…

nginx+tomcat负载均衡

最近练习nginxtomcat负载均衡。根据一些资料整理了大体思路&#xff0c;最终实现了1个nginx2个tomcat负载均衡。 安装JDK 1》进入安装目录&#xff0c;给所有用户添加可执行的权限 #chmod x jdk-7u67-linux-i586.rpm //不知这步有没有必要 2》安装JDK 输入命令#rpm –ivh jdk-7…

linux 最强shell,最牛B 的 Linux Shell 命令(一)

引言Shell作为Unix系操作系统当中最有魅力且不可或缺的组件&#xff0c;经过数十载的洗礼不仅没有被淘汰&#xff0c;而且愈加变得成熟稳健&#xff0c;究其原因&#xff0c;大概因为它是个非常稳固的粘合剂&#xff0c;能够把大量功能强大的组件任意配搭&#xff0c;总能很好很…