CSS 创建的反射

前言

在设计种反射并不像阴影那么受欢迎，还记得当 Apple 在几乎所有事情上都使用反射时，反射风靡一时。

倒影还是很酷！我们实际上可以使用 CSS 进行反射！

做个iPhone 14 ProMax的倒影

首先做个类名为units的容器里面放两个div，一个是显示文本一个用作倒影

<div class='units'>
  <div>iPhone 14 ProMax</div>
  <div>iPhone 14 ProMax</div>
</div>

接下来我们就弄样式

.units > * {
  background-image: url('https://images.unsplash.com/flagged/photo-1579268351234-073f85929562?w=200&q=80');
  background-clip: text;
  color: transparent;
}

background-clip 属性规定背景的绘制区域

• border-box是默认值。这允许背景一直延伸到元素边框的外边缘。
• padding-box在元素填充的外边缘剪辑背景，并且不让它延伸到边框中。
• content-box剪辑内容框边缘的背景。
• inherit``background-clip将父级的设置应用于所选元素。

将元素颠倒过来

.units > :last-child {
  transform: rotatex(180deg) translatey(15px);
}

条纹倒影

我们也可以尝试其他渐变样式，以条纹为例。我添加了图案以及之前的淡入淡出效果。

.units > :last-child {
  transform: rotatex(180deg) translatey(15px);
  mask-image: linear-gradient(transparent 50%, white 90%);
}

总结

反射效果是网站中使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。在此效果中，我们尝试模仿逼真的反射效果，就像从水中反射一样。