其实就是用两个图片拉

我是效果图

这里是代码

1.body内容

<div class="div-background"><div class="div-shadow"><div class="glass"></div><div class="glass-txt">:o  原来我是一块玻璃</div></div>
</div>

2.css样式

    body, html {height: 100%;margin: 0;padding: 0;overflow-x: hidden;}*, *:before, *:after {box-sizing: border-box;}.div-background{height: 100%;width: 100%;background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");background-size: cover;background-position: center;}.glass {    /*插入图片设置滤镜并且定位到中间*/height: 100%;width: 100%;background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");background-size: cover;background-position: center;filter: blur(20px);         /*模糊滤镜*/clip-path: inset(20%);      /*切割20%*/}.div-shadow {height: 100%;width: 100%;filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));display: flex;justify-content: center;}.glass-txt{position: absolute;font-size: 40px;color: white;top: 50%;transform: translate(0, -50%);}

就是这样

其实是相同的两个图片其中一个模糊掉

然后再把他切成方块就可以了:l

CSS filter-仿磨砂玻璃效果相关推荐

用CSS Filter 可以实现相同的效果
用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133" border ...
【css技巧】CSS filter的神奇用法 | 褪色|融合效果等
前言 css3的filter可以修改图片的可视效果,用的好堪比美图秀秀,做出来的网页非常炫酷,装上一个大比! 但是也不能滥用,毕竟兼容性摆在那里,用多了还可能卡. 你们看看,一张图加了filter效果 ...
html中菜单触碰变色,利用css filter实现菜单图片变色效果
需求场景在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...
【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果
上周到湖南长沙待了一周,在行走的过程中,发现目前最重要就是你的码一定要是绿码,如果是黄码,哪里都去不了,为啥说这个事情呢,因为我自己有2台手机,一台安卓小米,一台苹果,发现我到了长沙以后,核酸还是72 ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
[css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...
仿回收站效果的设计与实现
仿回收站效果的设计与实现功能要求: 使用HTML5拖放API相关技术,在网页上实现仿回收站的类似效果.用户通过拖拽可以将页面上的元素放置到回收站中删除. 实现效果: 一.界面设计核心技术概括 1.使 ...
HTML+CSS实现弹跳球效果
HTML+CSS实现弹跳球效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><head&g ...
【荐】JS实现类似星球仿flash效果的动态菜单
代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

CSS filter-仿磨砂玻璃效果

其实就是用两个图片拉

我是效果图

这里是代码

1.body内容

2.css样式

CSS filter-仿磨砂玻璃效果相关推荐

最新文章

热门文章