纯CSS的逼真的反射效果

前言

先赞再看，养成习惯~

接下来主要更新面向初学者的基本编码教程。简明扼要，小编只挑选了所有教程在10分钟之内的精髓！ 大师们有更好的见解欢迎在评论区留言告知，谢谢大家的关注、喜爱。

在本教程中，我们将向您展示如何在短短几分钟内仅使用CSS创建 任何元素的反射效果！

在学习web前端的过程中，难免会遇到很多的问题，这些问题可能会困扰你许久，为此我有个 web开发学习交流群（ 545667817 ），里面都是 ITPUB 的小伙伴，并整理了一份最全面前端学习资料 ,从最基础的HTML+CSS+JS 到移动端HTML5的项目实战的学习资料都有整理，想学习的都可以申请加入，大家互相学习，互相交流，共同进步，每日分享不同的学习资料！

概念

首先，让我们通过向该元素添加反射效果来理解该概念。这是一个简单的div元素，为图像背景分配了反射类别。

<div class="reflection"></div>

.reflection {
  width: 500px;
  height:333px;
  position: relative;
  background: url("img1.jpg");
}

现在，我将使用after伪元素创建图像的副本。我们将使用与原始背景相同的背景。您可以通过对背景图像属性使用继承来实现。与宽度和高度相同，我们将从原始宽度和高度继承它们。然后我将其放置在绝对位置下方并减去百分比底部

并将其垂直翻转，可以使用transform scaleY（-1）

.reflection::after {
  content:"";
  background-image: inherit;
  width:inherit;
  height:100%;
  position: absolute;
  bottom:-100%;
  transform:scaleY(-1)
}

但这太长了。因为现实中的反射仅是高度的一半左右。因此，我将其减小到40％并重新定位。您会注意到，我添加1％可以在原始图像和反射图像之间创建一个小的间隙。

.reflection::after {
  content:"";
  background-image: inherit;
  width:inherit;
  height:40%;
  position: absolute;
  bottom:-41%;
  transform: scaleY(-1);
}

现在的问题是，由于调整了背景大小，因此不再连接背景。要解决此问题，请将背景位置设置为底部。和背景大小以覆盖这两个区域。如果图像文件大于div大小，您可能会注意到背景发生了变化（为防止这种情况，请调整图像大小以匹配div大小）

.reflection {
...
  background-position: bottom;
  background-size: cover;
}
.reflection::after {
...
  background-position: bottom;
  background-size: cover;
}

接下来，我将在之前使用伪元素创建另一个div。这次我要比反射大。然后创建一个从透明白色到不透明白色的渐变背景。这将为反射创建褪色效果。您还需要设置z-index以将其放在顶部。

.reflection::before {
  content:"";
  width:inherit;
  height: 42%;
  position: absolute;
  bottom: -42%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3),white);
  z-index: 1;
}

看起来挺好的。现在，我要为原始图像创建一个阴影以创建深度。然后将反射的不透明度降低到50％

.reflection {
...
  box-shadow: 0px 50px 70px rgba(0,0,0,0.3),
              0px 10px 10px rgba(0,0,0,0.1);
}
.reflection::after {
...
  opacity: 0.5;
}

这就是概念的要点！

让我们尝试一下！

现在，我在Codepen 上找到了一个Coverflow 演示，该演示利用了 swiper.js（一个很棒的移动刷卡JavaScript库）这个项目的完美用法示例！因此，我窃取了代码并对其进行了一些调整，然后以与第一个示例相同的方式添加反射。这就是结果。

preview

最后：送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入web开发学习基地（ 545667817 ）！
同时需要源码的小伙伴们也可以进入，找管理小姐姐领取。