CSS 类似 iOS 的毛玻璃动态模糊效果

CSS 类似 iOS 的毛玻璃动态模糊效果

提到网页毛玻璃效果,总结下来有以下2种:

  1. 模糊元素本身
  2. 模糊元素后面的内容

早在之前,1就已经可以通过 CSS3 filter 属性实现,而2一直没有一个好的解决方案。对1的运用,也可以达到2的效果,通过模糊图片的一部分,就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是,我们的背景是一个静态的,单一的图片,那么如果我们需要模糊的背景比较复杂呢?仔细观察QQ右栏的标题栏,和下方的应用 Dock,都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

CSS鼠标悬浮改变相邻元素样式

效果:

Hover me! X

源码:

1
2
3
4
<div class="chip">
<span class="name">Hover me!</span>
<span class="close-bth">X</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.chip {
display: flex;
width: fit-content;
font-size: 20px;
text-align: center;
background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
color: white;
background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的,其实是想试试在博文中插入HTML啦。

如何实现flex布局下div等宽且内部文字可以溢出显示

效果如图:

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×