SVG透明毛玻璃面板遮罩特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13



特效描述:透明毛玻璃 面板遮罩。基于svg绘制网页界面上悬浮透明的毛玻璃面板,半透明的玻璃层遮罩背景特效。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/loading.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/loading.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

2. 引入JS

<script src="./js/app.js"></script>
<script src="./js/app.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>
<body space-top-bot="50px">
	<div class="page-loading__icon"></div>
	<div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px">
		<svg>
			<filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB">
				<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
			</filter>
			<image xlink:href="./img/bg1.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" />
		</svg>
		<div class="content" content-margin="5px">
			<!-- ALL PANEL CONTENT GOES HERE -->
			<!-- .flex-container is for demo purposes only -->
			<div class="flex-container">
				<span class="wh">80% 60%</span>
				<span class="wh">80% 80%</span>
				<span class="wh">这里是文字内容</span>
			</div>
		</div>
	</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
二十二
关注
TA的相关作品 >>更多
热搜关键词
相关标签特效


热门标签: 文字遮罩 图片遮罩 背景遮罩 阴影遮罩 遮罩层

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到