@TOCcss

css毛玻璃特效

先上效果图

HTML代码

<body><div class="header-box flex justify-between mt-20"><nav><ul id="nav" class="flex justify-between header-left pl-20"><li><a class="nav-active " href="./index.html">首页</a></li><li><a class="header-tag" href="./index.html">待开发的功能</a></li><li><a class="header-tag" href="./index.html">待开发的功能</a></li><li><a class="header-tag" href="./index.html">待开发的功能</a></li><li><a class="header-tag" href="./index.html">待开发的功能</a></li><li><a class="header-tag" href="./index.html">待开发的功能</a></li></ul></nav><div class="header-right flex justify-between pr-20"><div class="flex search vertical-center relative"><input class="pl-20" value="" placeholder="请输入你想要搜索的内容"><div class="search-but absolute"><span class="iconfont icon-sousuo" style="color: #000"></span></div></div><div class="flex login-box justify-between"><div class="pointer header-tag">登录</div><div class="pointer header-tag">注册</div></div></div></div>
</body>

css

body::after {display: block;content: '';background-image: url("../images/bj.jpg");background-size: cover;background-repeat: no-repeat;background-position: center;background-attachment: fixed;opacity: 0.4;z-index: -1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.header-box {min-width: 1200px;height: 60px;line-height: 60px;font-size: 16px;background-color: rgba(0,0,0,0.3);border-radius: 20px;animation: shadow 3s ease;animation-iteration-count: infinite;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);  /* css滤镜 */
}

CSS backdrop-filter 滤镜毛玻璃效果相关推荐

用css使图片产生毛玻璃效果
毛玻璃的图片效果,使得其显示更加唯美,用户体验更佳,所以在手机端电脑端应用甚广比如ios系统: 所以现在我们就来看看毛玻璃效果的实现方法吧: 首先这是html的主要内容: <div class ...
CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
说明因为我的底子特别的差(大佬勿喷),今天想让文字在图片上方显示,并且给图片模糊,结果当图片模糊之后也就是实现毛玻璃效果后,发现图片上的文字也模糊掉了,这个问题当然可以用伪元素的方式解决,但是由于某 ...
图片模糊化编程(毛玻璃效果)
去年盛夏之时,曾写过"小tip: 使用CSS将图片转换成黑白"一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间 ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
CSS技巧收集——毛玻璃效果（深入理解滤镜filter）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 原文链接 ...
css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
filter滤镜实现img图片的CSS蒙版效果、模糊效果
文章目录 ```filter滤镜```实现```img图片```的CSS```蒙版效果.模糊效果``` 1. 效果图 2.代码实例注意: 3.兼容性对比 filter滤镜实现img图片的CSS蒙版效 ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
html滤镜无效果,为什么css滤镜(filter属性)没用？
为什么css滤镜(filter属性)没用?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 滤镜filter属性,可以对网页中的图片进行类似Photosho ...
css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...

CSS backdrop-filter 滤镜毛玻璃效果

css毛玻璃特效

先上效果图

HTML代码

css

CSS backdrop-filter 滤镜毛玻璃效果相关推荐

最新文章

热门文章

CSS backdrop-filter 滤镜 毛玻璃效果

css毛玻璃特效

先上效果图

HTML代码

css

CSS backdrop-filter 滤镜 毛玻璃效果相关推荐

最新文章

热门文章

CSS backdrop-filter 滤镜毛玻璃效果

CSS backdrop-filter 滤镜毛玻璃效果相关推荐