css3-实现毛玻璃效果

css3-实现毛玻璃效果

毛玻璃效果中采用了clip path裁切与filter滤镜。

banner,drop- shadow,glass为相同大小的div

banner层用来添加总的背景，

drop-shadow用来添加毛玻璃的阴影滤镜，

glass用来做毛玻璃

知识点分析:

html:

		<section class="banner">
			<div class="drop-shadow">
				<div class="glass"></div>
				<span>甜玫甜心蛋糕</span>
			</div>
		</section>

css:

		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html,body{
				width: 100vw;
				height: 100vh;
			}
			.banner{
				width: 100vw;
				height: 100vh;
				background-image: url('./img/1.png');
				background-position: center center;
				background-size: cover;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				
			.glass{
				width: 100%;
				height: 100%;
				background-image: url('./img/1.png');
				background-position: center center;
				background-size: cover;
				display: flex;
				justify-content: center;
				align-items: center;
				clip-path: inset(200px 200px);
				filter: blur(20px);
			}
			.drop-shadow{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.5));
			}
			.banner span{
				color: #fff;
				font-size: 40px;
				letter-spacing: 0.75em;
				padding-left: 0.375em;
				position: absolute;
			}
		</style>