使用canvas实现擦玻璃效果

全栈程序员-站长 • 2021年12月22日上午9:00 • 未分类 • 阅读 53

体验效果:http://hovertree.com/texiao/html5/25/效果图：代码如下：关注微信公众号何问起，账号ihewenqi，或者微信扫描下面二维码关注。然后发送&quot

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

全栈程序员社区

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

效果图：
使用canvas实现擦玻璃效果

代码如下：

<!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 ，或者微信扫描下面二维码关注。然后发送”橡皮擦”查看效果。
使用canvas实现擦玻璃效果

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120642.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

go语言微服务之RPC协议[通俗易懂]

go语言微服务之RPC协议[通俗易懂]1什么是RPCRemoteProcedureCallProtocol–远程过程调用协议！IPC：进程间通信RPC：远程进程通信–应用层协议（http协议同层），底层用TCP实现。理解RPC：像调用本地函数一样，去调用远程函数。通过rpc协议，传递：函数名，函数参数。达到在本地，调用远端函数，得返回值到本地的目标。为什么微服务要使用RPC：每个服务都被封转成进程，彼此“独立”。进程与进程之间，可以使用不同的语言实现。2RPC使用的步骤服务端：注册rpc

全栈程序员-站长
2022年5月12日
61
string数组怎么定义对象_定义二维字符型数组

string数组怎么定义对象_定义二维字符型数组这里是IT修真院分享课，今天要分享的主题是【string数组怎么定义】string数组的定义有三种：Stringarr[]=newString[10];//创建一个长度为10的String类型数组。Stringarr[]={“张三”,”李四”};String[]str=newString[]{“”,””,””,””,””};Stringar…

全栈程序员-站长
2022年4月20日
60
周末日记

周末日记书上说人要长大三次第一次是在发现自己不是世界中心的时候第二次是在发现即使再怎么努力终究还是有些事令人无能为力的时候第三次是在明知道有些事可能会无能为力但还是会尽力争取的时候

全栈程序员-站长
2022年6月4日
38
框架介绍

MVC模式MVC模式介绍Django中的MVC模式分为三个部分此外，Django还有一个URL分发器。它的作用是将一个个URL的页面请求分别发给不同的Views处理，Views再调用相应的Mod

全栈程序员-站长
2022年3月29日
40
C++;继承和多态概念补充…….

C++;继承和多态概念补充…….一继承和多态类之间的继承基类父类成员变量描述类的属性成员函数功能派生类子类体现出与基类的不同继承基类与派生类之间访问权限 1 public 继承基类里面的公有成员变量被继承后在派生类中也是公有的可以在类外被访问基类里面的保护成员变量被继承后在派生类中可以被访问在派生类中

全栈程序员-站长
2025年6月27日
4
if sql语句_SQL IF语句介绍和概述

if sql语句_SQL IF语句介绍和概述ifsql语句ThisarticleexplorestheusefulfunctionSQLIFstatementinSQLServer.本文探讨了SQLServer中有用的函数SQLIF语句。介绍(Introduction)Inreallife,wemakedecisionsbasedontheconditions….

全栈程序员-站长
2022年7月16日
20

发表回复

关注全栈程序员社区公众号