使用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,一经查实,立即删除!

相关文章

[转]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…

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://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目中使用百度地图、高德地图、谷歌中国地图、天地图的需求越来越多&#xff0c;这里我跟大家一起对各地图使用的坐标系做一个简单的探讨。…

讯飞输入法有没有Linux,Debian testing 安装讯飞输入法 - Linux系统与应用 - LinuxApp - 水木社区...

突然发现Deepin发行版带有讯飞输入法&#xff0c;于是折腾了一会&#xff0c;安装好了这个输入法&#xff0c;现把安装过程分享如下&#xff1a;软件包的依赖&#xff1a;Package: iflyimeVersion: 0.9.962Section: develPriority: optionalArchitecture: amd64Depends: libboo…

HTTP必知必会

2019独角兽企业重金招聘Python工程师标准>>> HTTP消息HTTP请求消息HTTP响应消息消息首行请求行响应行消息头部请求头请求头消息正文请求正文响应正文Web服务器把接收到的HTTP请求消息封装成request对象&#xff0c;作为service的参数传入service函数&#xff0c;ser…

更新10_linux,时隔十年,QQ更新了Linux版本

昨天1024程序员节&#xff0c;QQ悄悄地更新了QQ for Linux&#xff0c;也许是给各位一个惊喜吧。官网及其的简陋。和一个Word文档似的。十年一更&#xff0c;有网友称&#xff0c;瞬间回到QQ2006&#xff0c;确实界面功能有些落后&#xff0c;相信QQ可以跟上潮流的&#xff0c;…

C语言里if语句变量作为判断条件,C语言教学(九-上)if else判断语句

原标题&#xff1a;C语言教学(九-上)if else判断语句今天讲if else判断语句&#xff0c;简单理解就是进行条件判断&#xff0c;如果条件达到则执行if 里或else里的语句。先来看if。if的写法和for差不多,就是不用括号里的两个分号&#xff0c;if (条件) { }&#xff0c;if加括号…

二维数组联通子数组和最大

题目要求&#xff1a; 返回一个二维整数数组中最大联通子数组的和。输入一个二维整形数组&#xff0c;数组里有正数也有负数。文件输出。思路:和之前的动态规划相识&#xff0c;把二维数组转换为一维数组&#xff0c;先求每一个列的子数组和最大&#xff0c;最后在用正数就加&a…

Win10 IIS本地部署网站运行时图片和样式不正常?

后期会在博客首发更新&#xff1a;http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 启用关闭win功能&#xff0c;开启一下静态内容 收工~

设置IIS会话过期时间

打开默认网站----双击ASP--展开会话属性---更改超时时间-转载于:https://www.cnblogs.com/genesis/p/4816128.html

WWDC 2013 Session笔记 - iOS7中弹簧式列表的制作

这是我的WWDC2013系列笔记中的一篇&#xff0c;完整的笔记列表请参看这篇总览。本文仅作为个人记录使用&#xff0c;也欢迎在许可协议范围内转载或使用&#xff0c;但是还烦请保留原文链接&#xff0c;谢谢您的理解合作。如果您觉得本站对您能有帮助&#xff0c;您可以使用RSS或…

H5学习之旅-H5列表(8)

列表的基本语法 ol&#xff1a;有序列表 ul&#xff1a;无序列表 li&#xff1a;列表项 dl&#xff1a;列表 dt&#xff1a;列表项 dd&#xff1a;列表描述 常用列表 1.无序列表&#xff1a;使用标签 ul&#xff0c;li 属性&#xff1a;disc&#xff08;默认实心圆&#xff09;…

c语言中用文件处理数据,C语言文件处理 -C语言从文件中读写格式化数据

从图 1 所示的文件 fin.txt 中读取学生姓名、身高和体重&#xff0c;计算并显示它们的平均值&#xff0c;并且将显示结果保存到文件 fout.txt 中。图 1&#xff1a;输入输出文件示例C语言代码清单 1&#xff1a;读取学生姓名、身高和体重&#xff0c;计算并显示它们的平均值#in…

三星+android+7.0+自动纠正单词,升级党必看!三星S/Note系列更新Android 7.0指南

上周&#xff0c;雷科技(微信ID&#xff1a;leitech)曾为大家提供了一份Android 7.0升级预测名单。现在为了增加针对性&#xff0c;这次笔者就以三星最热门的两大旗舰S和Note系列为例&#xff0c;给大家提供一个全方面的更新指南。截至目前&#xff0c;三星S系列和Note系列的正…

互联网年鉴

最近互联网行业&#xff0c;有一个词说的比较多了&#xff0c;“资本寒冬”。作为&#xff0c;一个在这个行业里干的人&#xff0c;真心是好怕怕呢。 妈蛋&#xff0c;真怕哪天就突然失业了呀。所以&#xff0c;无聊的(操蛋的)去整理了一些98年开始一直到现在的互联网中一些自己…