关于前端:仅用-CSS实现多彩智能的阴影

9次阅读

共计 2626 个字符，预计需要花费 7 分钟才能阅读完成。

有没有想过如何创立从前景元素中继承某些色彩的暗影成果？浏览本文并找出如何实现办法吧！

前几天我通过家得宝（Home Depot，美国家得宝公司，寰球当先的家居建材用品零售商），他们正在大规模展销正在发售的智能灯 💡，其中一种是一系列灯泡位于电视机前面，它们会投射出与电视机前景屏幕上显示的色彩相近的灯光，相似于以下图片所示。

留神电视前面产生了什么。电视机屏幕前景中显示的色彩被灯投影成黑白暗影背景。随着屏幕上色彩的变动，背景投影色彩也发生变化。真的很酷，对吧？

看到这一点后，自然而然地我首先想到的是，是否应用 web 开发技术创立一个五光十色的，并且足够聪慧能够模仿前景色彩的暗影呢？事实证明，在只应用 CSS 的状况下，齐全能够实现这种成果。在本文中，咱们将钻研如何实现。

开干！

在接下来的段落中你将会发现，刚开始时，乍一看仅应用 CSS 来创立智能的黑白暗影仿佛是一项艰巨的工作，当咱们循序渐进，把艰难局部拆分成更小的局部时，你就会发现所有都会变得容易理解消化。在接下来的章节中，咱们将创立一个如下所示的示例：

你看到的是一张寿司 🍣 的图片，前面有与前景色彩绝对应的暗影。为了强调咱们所做的是动静的，给暗影减少了一个脉动动画成果。通过这个无效的示例，让咱们深入探讨如何仅在应用 HTML 和 CSS 的状况下让所有变得活泼起来。

用于展现寿司 🍣 的 HTML 如下所示并没有什么特地：

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

咱们有一个父级 div 元素 .parent，它蕴含一个子级元素 .suchi 用于展现 🍣。咱们通过应用一张背景图片的模式来实例化 🍣，.sushi 元素的具体款式规定如下：

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

在下面款式规定中，咱们将 div 设置为 150 * 150 宽高像素，并且设置了 background-image 及相干属性，如果展现一下咱们当初所实现的后果，能够看到如下图所示的内容。

当初咱们曾经展现出了咱们的寿司 🍣 图片，剩下更加乏味的局部就是来定义暗影。咱们将应用指定一个子伪元素 ::after 来定义暗影，它将做 3 件事件：

间接位于图片所在 div 的前面；
继承与父元素雷同的背景图像；
通过滤镜产生出多彩的 drop-shadow 暗影成果。

上述 3 个性能由以下 2 个款式规定实现：

.colorfulShadow {position: relative;}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

花一点工夫来浏览下这里的实现，亲密关注每个属性和对应值。最值得注意的是 background 属性和 filter 属性。background 的值是 inherit，这意味着它将继承父级元素的背景值：

background: inherit;

filter 属性定义了两个滤镜值：drop-shadow 和 blur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

咱们的 drop-shadow 滤镜设置了一个 50% 透明度的彩色暗影。blur 滤镜为为元素设置 20px 的含糊成果。这两个滤镜的联合最终就能够发明出多彩的暗影，当这两条款式规定失效时，咱们就能够看到如下图呈现在寿司 🍣 图像前面黑白的暗影：

到这一点，咱们曾经实现了很多。为了完整性，如果你想要多彩的暗影具备放大放大的动画成果，以下额定的 CSS 能够帮你实现：

.colorfulShadow {position: relative;}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {transform: scale(1, 1);
  }
  to {transform: scale(1.3, 1.3);
  }
}

如果你想在不应用循环动画成果的状况下加强交互性，也能够应用 CSS transition 来扭转暗影的行为，如在 hover 操作状况下。须要强调的难点是看待伪元素只须要像看待用 HTML 创立的或 JavaScript 动态创建的元素一样，惟一的不同是这个元素齐全是仅应用 CSS 创立的！

伪元素容许咱们应用 CSS 来创立通常在 HTML 和 JavaScript 畛域内实现的元素创立工作。对于咱们多彩的智能暗影来说，咱们依赖于父元素有一个背景图像集，这使得咱们定义一个既能够继承父级背景细节又能够设置含糊成果和投影成果的子元素变得容易。尽管这所有都很好，缩小了咱们大量的复制粘贴工作，然而这种办法也不是很灵便。

如果我想将这样的暗影利用到一个不只是带有背景图像的空元素上，该怎么办呢？如果我有一个 HTML 元素如一个按钮或组合框，我想利用这种暗影成果呢？一种解决方案是依附 JavaScript 复制 DOM 中的相应元素，将其搁置在前台元素底层，利用过滤器，这样也是一种办法。尽管这能够实现成果，但我想到这个有点反复 DOM 元素的惨重过程就不寒而栗。更蹩脚的是，JavaScript 没有将你想提供的任意视觉动向转换为渲染指标位图的能力！🥶

正文完