闪亮玻璃悬浮效果（玻璃变形）
结果
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
今天我们来使用 background-filter 属性和倾斜的 ::before 元素，创建一个漂亮的闪亮玻璃悬停效果。
阅读全文或在 YouTube 上观看我的编程演示（TL;DW）：
结果
首先，背景信息
我们先从背景开始，叠加三种不同的渐变色。每种渐变色都是从一种颜色过渡到透明，通过改变角度，它们可以很好地相互融合。
main {
background:
linear-gradient(322deg,
#ba4aff, rgba(#ba4aff, 0) 70%),
linear-gradient(178deg,
#008aff, rgba(#008aff, 0) 70%),
linear-gradient(24deg,
#00ffc6, rgba(#00ffc6, 0) 35%);
}
标记
标记由一个带有标尺的容器（用于生成中间的线条）和一个包含五个图标按钮的容器组成，每个按钮都包含一个图标。
<main>
<div class="ruler"></div>
<div class="container">
<a class="icon" href="#">
<i class="fas fa-phone"></i>
</a>
<a class="icon" href="#">
<i class="fas fa-images"></i>
</a>
<a class="icon" href="#">
<i class="fas fa-envelope-open"></i>
</a>
<a class="icon" href="#">
<i class="fas fa-comment"></i>
</a>
<a class="icon" href="#">
<i class="fas fa-music"></i>
</a>
</div>
</main>
基础知识和尺子
我们来添加一些变量、重置值，并将整个元素居中显示在视口中：
:root {
--foreground-color: white;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
标尺将放置在视口的下半部分。通过将顶部边框设置为浅白色，即可生成实际的标尺：
.ruler {
border-top: 1px solid rgba(white, 0.3);
background-color: rgba(white, 0.05);
position: absolute;
top: 50%;
height: 50%;
left: 0%;
right: 0%;
}
设置容器
容器最重要的部分是网格布局配置，它默认只有一行——因为没有指定行配置。列的配置使得在考虑1fr间距后，每一列占用的空间大小相同。1.25rem
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.25rem;
}
按钮设置
我们先来设置一些变量，以便于进行自定义：
- 该
--size变量控制每个按钮的显示大小。由于其默认值为6rem0，因此它也会根据文档的字体大小而变化。 --transition-duration并--transition-easing允许我们同步修改稍后将添加的两个悬停过渡效果。
.container {
...
.icon {
--size: 6rem;
--transition-duration: 500ms;
--transition-easing: ease-out;
}
}
图标按钮的配置本身非常简单明了。它采用正方形形状，内容水平和垂直居中。此外，还添加了略微的边框、较深的阴影效果以及半透明的白色背景。需要注意的是，阴影效果是根据按钮的大小来计算的。因此，当按钮大小发生变化时，阴影也会随之缩放。
.container {
...
.icon {
// quadratic shape
width: var(--size);
height: var(--size);
// center content horizontally
// and vertically
display: flex;
align-items: center;
justify-content: center;
// apply text/font styling
text-decoration: none;
color: var(--foreground-color);
font-size: 2rem;
// Add a slight border and a
// strongly blurred box shadow
border: 1px solid rgba(white, 0.6);
background-color: rgba(white, 0.1);
border-radius: 0.5rem;
box-shadow:
0px
calc(var(--size) / 6)
calc(var(--size) / 3)
rgba(black, 0.1);
}
}
玻璃态
如果你是冲着这个来的，那么这一行代码就能帮你实现“经典”的玻璃变形效果。这种效果在背景有清晰的纹理时效果最佳，所以才需要用到标尺。
.container {
...
.icon {
backdrop-filter: blur(2px);
}
}
请注意，该
backdrop-filter属性目前仅适用于基于 Webkit 的浏览器，因此在 Firefox 中，您只会看到半透明的背景，而不会看到标尺的模糊线条。
光泽
为了突出每个按钮的玻璃质感，我们添加了一条闪亮的条纹，当鼠标悬停在按钮上时，该条纹会从左下角延伸到右上角。首先，我们要确保按钮在视觉上略微抬升。因此，我们将按钮transform的属性设置为可过渡的，并通过变换将按钮抬升至其尺寸的 25% translateY。
.container {
...
.icon {
transition: transform
var(--transition-duration)
var(--transition-easing);
overflow: hidden;
&:hover {
transform: translateY(-25%);
}
}
}
这条闪亮的条纹是通过添加一个::before伪元素创建的，该伪元素的背景色为稍深的白色，并倾斜了 45 度。尤其是倾斜角度，对最终效果起到了显著作用。
.container {
...
.icon {
overflow: hidden;
&::before {
content: '';
background: rgba(white, 0.4);
width: 60%;
height: 100%;
top: 0%;
transform: skew(45deg);
position: absolute;
transition: left
var(--transition-duration)
var(--transition-easing);
}
}
}
最初，闪亮的条纹位于按钮左侧外侧，每次鼠标悬停在按钮上时，它都会向右移动。就是这样。😎
.container {
...
.icon {
...
&::before {
left: -125%;
}
&:hover {
&::before {
left: 150%;
}
}
}
}