导航栏模糊

原创已于 2023-09-19 13:11:50 修改 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2023-04-12 11:00:50 首次发布

这篇文章介绍了如何使用CSS的radial-gradient,background-size,backdrop-filter属性来创建一个效果，当内容滚动时，让滚动的部分变得模糊。saturate(50%)用于调整饱和度，blur(4px)则添加了模糊效果，结合背景渐变，实现了独特的视觉体验。

background-image: radial-gradient(black, transparent 1px);

background-size: 4px 4px;

backdrop-filter: saturate(50%) blur(4px);

滚动时候把滚动的东西虚化

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

俊人呀

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter

broken_promise的博客

05-07

734

宽高的背景「有一定距离」. 实际上这些每个小背景之间是互相紧密排列的没法强行增加间隔. 所以我们使用径向渐变, 从透明色渐变为白色, 这样不同背景都是以白色互相连接而透明部分互相隔离, 看起来就是点阵式了. 下图是灵魂画手的简笔画说明😅。允许开发者将模糊或色彩偏离等图形效果应用到元素背后的区域. 因为它应用于元素背后所有内容, 因此如果你想要看到效果必须将元素的背景设置部分透明.看完上面代码, 会让人有一点疑惑, 好像很多滤镜都生效了, 但是有两个就是没有生效, 分别是。是添加到前面的元素的。

苹果导航条的高斯模糊效果（css）

深圳最菜前端

09-22

1754

今天接到一个需求，实现一个高斯模糊半透明的效果，以前没有写过这种效果，今天实现了，做一个记录这个是给出的设计稿可以看到，在免费预约门店的位置，滑动下来的文案，是一个毛玻璃效果，底部的绿色是固定的 // 底部容器 .btn-bottom{ width: 750rpx; height: 303rpx; position: fixed; bottom: 0; left: 0; background-color: rgba(126, 194, 36, .8); backdrop-filter:

参与评论您还未登录，请先登录后发表或查看评论

Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...

weixin_36221113的博客

05-28

349

(1)如果是使用系统导航栏则设置其translucent属性即可：[self.navigationController.navigationBar setBackgroundImage:[UIImage new]forBarMetrics:UIBarMetricsDefault];self.navigationController.navigationBar.shadowImage = [UIIm...

导航条动态模糊效果实现原理实战

weixin_45785873的博客

04-29

1172

上微博时发现，在我向下看内容的时候，发现内容滚动到顶部的导航栏就变模糊了，觉得很有趣，就自己尝试的去写一个试试

Android导航栏高斯模糊,ViewPagerHelper: 这个一个 viewpager 工具类，能够帮你快速实现导航栏轮播图，app引导页，viewpager + fragment；内置多种ta...

weixin_42355400的博客

05-28

528

你是否有遇到这样的问题，每次开发一个新的项目，在 viewpager 这一块上，总是在做重复的东西，比如app引导页，轮播图，viewpager+fragment 的 tab 指示器等等，这些虽然简单，但却是每个app都要的，而且很耗时，有没有每次在写这个，都很无语的感觉呢？基于这个，ViewPagerHleper 就诞生了，它可以快速帮你搞定 banner 轮播图，实现高级定制化，内置多种指示器...

模拟哔哩哔哩导航条模糊效果

zzz19的博客

09-17

609

在自己之前做的一个视频播放的网站的项目中，由于没有专业的设计，只有一个PS大神。所以在做页面的时候，如何布局如何设计页面的责任就落在了我这个前端学徒工的身上。那时候自己用的最熟练的就是盒子模型，所以...

用html实现模糊效果,纯html css实现动态高斯模糊效果（第二弹），实现导航条动态模糊内容...

weixin_32700139的博客

06-03

802

还是先看效果图：静态效果图.pngGIF.gif页面布局：顶部高斯模糊导航条页面主体导航条动态高斯模糊实现原理第一步，将页面主体内容clone到navbar中，然后使用css3 -webkit-filter滤镜对内容做高斯模糊第二部，监听页面滚动事件，计算出scrollTop，将navbar中的内容做同步滚动，同步滚动使用的方法是transform下面的translateY样式，对Y轴做同步偏移代...

HTML+CSS 动态模糊导航菜单

宁夏前端工程师，马卫斌，wx：1457508895

07-10

255

元素的透明度设置回1（完全不透明），并移除模糊效果，使得当前悬停的列表项看起来清晰。通过这些样式的组合，创建了一个具有视觉吸引力和动态交互效果的导航菜单。元素的透明度设置为0.2，使其看起来更淡，同时应用了一个2px的模糊滤镜效果，使得非悬停的列表项看起来更加模糊。元素的高度为视口（viewport）的高度的100%，即整个屏幕的高度。这样做的目的是为了消除不同浏览器之间的默认样式差异，确保页面的布局从统一的起点开始。，渐变角度为200度，这意味着渐变的方向是从左上到右下。设置了链接的颜色为深灰色。

滚动条滚动后 导航栏出现_滚动模糊的网站导航栏

cungui5726的博客

08-22

354

滚动条滚动后 导航栏出现Another popular interface pattern, one that gained particular ascendancy after the release of iOS 7, is a “frosted” navigation bar that blurs page content scrolled behind it. It might app...

Axure-RP原型图组件（导航栏-模糊搜索..）

03-19

嘻嘻嘻

上下导航栏

11-29

在IT行业中，导航栏是网页或应用程序界面设计中不可或缺的一部分，它为用户提供了一种直观的方式来探索和理解网站或应用的结构。"上下导航栏"是一种特殊的导航设计模式，它包括了顶部导航栏和底部导航栏，这两种元素...

android ios动态模糊效果,Android自定义View之仿IOS模糊控件 (标题栏滑动过程中实时模糊)...

weixin_31845243的博客

05-25

731

前言Android开发过程中，总是需要与IOS坐比较，每次产品经理都要问，为什么IOS能做到，Android做不到。并不是Android做不到，主要原因是IOS下，有些控件是有现成的组件库的，Android没有，所以Android需要去自己绘制。上次产品经理就让我写一个功能，需要在页面滑动时，顶部导航栏需要从透明到模糊渐变，一定程度后不再改变。查阅了网上各种资料，发现关于Android高斯模糊的确...

【CSS】样式隔离

小秀的博客

11-25

576

方案隔离强度是否需要构建框架绑定适用场景BEM / 命名空间弱否无组件库、辅助手段强是无React / 通用组件Vue强是（Vue CLI）VueVue 单文件组件Shadow DOM极强否无Web Components、微前端CSS-in-JS强是React动态主题、复杂交互组件微前端专用方案强是/否无qiankun、micro-app 等架构。

flex垂直布局，容器间距相等

最新发布

weixin_44601930的博客

11-25

171

【代码】flex垂直布局，容器间距相等。

css：制作带边框的气泡框

1111111111

11-25

173

本文介绍了使用CSS创建带边框的对话气泡效果的方法。通过四个步骤实现：1)创建矩形内容框；2)添加红色描边三角形；3)叠加绿色填充三角形；4)调整颜色和位置，使两个三角形形成1px偏差的边框效果。最终效果为一个蓝色边框、浅蓝色背景的对话气泡，包含指向气泡的带边框三角形箭头。该方法利用了CSS的border属性和绝对定位技术，通过两个三角形的错位叠加实现边框效果。

CSS基础详解(1)

Coding...

11-22

1072

CSS（层叠样式表）是控制网页外观的声明式语言，通过选择器和属性值定义元素样式。CSS语法基于规则，由选择器、属性和值组成，支持多种选择方式：元素类型、类、ID、属性状态及伪类/伪元素。CSS可实现文本样式、布局设计和动画效果，通过<link>标签与HTML文档关联。选择器可组合使用，但语法错误会导致整条规则失效。CSS的核心特性是层叠优先级机制，确保复杂网站的样式规则有序应用。

CSS 和 JS 如何阻塞浏览器渲染 DOM

YSbnhoffer的博客

11-25

671

CSS和JS会阻塞浏览器渲染DOM：CSS会阻塞渲染，JS会阻塞解析。这是因为浏览器需要完整加载CSS才能正确计算样式，而JS可能修改DOM结构需先执行。优化策略包括：CSS方面可压缩合并文件、异步加载非关键CSS；JS方面使用async/defer属性、代码分割；还可利用CDN和缓存减少资源加载时间。通过合并文件、延迟加载等技巧可显著提升页面加载速度，改善用户体验。

（4）pytest+Selenium自动化测试-元素定位之CSS Selector定位

11-22

998

CSS Selector 就像 “定位界的瑞士军刀”，通过 ID、Class、属性、层级的灵活组合，几乎能搞定所有复杂元素！核心是掌握 “属性组合” 和 “模糊匹配”，这两个技巧能解决 80% 的实战问题～

Vue项目中安装及使用Sass（scss）

2509_94006474的博客

11-25

258

为什么会有这个安装方法，是因为我在使用常规安装方法时，会出现版本不兼容问题，导致安装失败，所以尝试了一个新的方法，如下。的版本，因为它会根据 npm 依赖项自动安装合适的版本。项目就可以正常使用sass啦~：nodejs环境中将sass转css。2.在这个配置中，你不需要指定。：把 sass编译成css。