css3 毛玻璃效果

avatar
avatar
小王先森
389
文章
383
评论
2020年9月23日 6 113

1、html代码

<div class="wrap">
    <h3>文章标题</h3>
    <p>这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章</p>
</div>

2、css 样式

.wrap h3 {
	font-size:18px;
	color:#ffffff;
}
.wrap p {
	font-size:14px;
	color:#ffffff;
	font-variant-ligatures:common-ligatures
    discretionary-ligatures
    historical-ligatures;
}
body {
	min-height:100vh;
	box-sizing:border-box;
	margin:0;
	padding-top:calc(50vh - 6em);
	font:150%/1.6 Baskerville,Palatino,serif;
}
body,.wrap::before {
	background:url("bg.blyoo.com) 0 / cover fixed;
}
.wrap {
	position:relative;
	margin:0 auto;
	padding:1em;
	max-width:23em;
	background:hsla(0,0%,100%,.25) border-box;
	overflow:hidden;
	border-radius:.3em;
	box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
	text-shadow:0 1px 1px hsla(0,0%,100%,.3);
}
.wrap::before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:-30px;
	z-index:-1;
	-webkit-filter:blur(20px);
	filter:blur(20px);
}

3、效果展示

css3 毛玻璃效果

 

继续阅读
avatar
  • 本文由 发表于 2020年9月23日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:6   其中:访客  3   博主  3
    • avatar 萧瑟 5

      有学习才有记录,不错。

      • avatar 小姚工作室 4

        CSS确实强大,但完全看不懂 :???:

        • avatar 阿小州 1

          完全看不懂哈哈哈哈哈!