宁静的 CSS 斑驳光线效果

傍晚时分，阳光透过沙沙作响的树叶，散发出宁静的温暖。艺术家们利用斑驳的光线创造出柔和、迷幻的效果。

我们可以在网页设计中创造出同样的斑驳光线效果，将其应用于照片和插图，为原本单调乏味的内容增添一抹魔力，使其焕发生机。

我将向您介绍一种简单快捷的方法来添加此效果……只需使用 CSS 即可。

在深入代码之前，了解斑驳光线的构成非常重要。它由大块的圆形或椭圆形的光斑组成，这些光斑被树叶投下的阴影所截断。基本上是穿过树叶、树枝等的漏光。有时阴影会形成清晰的边缘，但更多时候是模糊的，因为我们谈论的是穿过许多不太清晰的空间的光线，这些空间会散射和扭曲光线，因为它们投射的阴影距离比，比如说，你在附近墙上从直射阳光下投射的清晰阴影要远得多。

以下是带和不带斑驳光线照射的白墙的外观差异

我将使用纯文本和有趣的表情符号来重新创建斑驳光线效果，应用 CSS 阴影和混合模式来模仿自然。我也将介绍其他方法。

设置场景

我们将使用文本——字母表中的字母、特殊字符、表情符号等——来创建光线的形状。而“光线”指的是浅色、半透明的颜色。再次强调，我们追求的是斑驳的光线效果，而不是锐利、清晰或强烈的效果。

最好选择某种程度上呈椭圆形或长方形的字符——斑驳光线产生的光斑形状各异。您需要根据自己的最佳判断来获得您想要的效果。我呢？我使用🍃、🍂、\，因为它们是椭圆形、长方形和倾斜的——为原本宁静的效果增添了一丝混乱和不可预测性。

我将它们包装在段落中，这些段落包含在一个.backdrop父元素中

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes">\</p>
</div>

我将父元素用作投射斑驳光线和阴影的表面，为其纹理应用背景图像。而且，我不仅为表面指定了width和height，还对其设置了隐藏溢出，这样我就可以投射超出表面的阴影，而不会显示出来。由于 CSS 网格，投射斑驳光线效果的对象位于背景表面中间。

.backdrop {
  background: center / cover no-repeat url('image.jpeg');
  width: 400px; height: 240px;
  overflow: hidden;
  display: grid;
}
.backdrop > * {
  grid-area: 1/1;
}

我发现，只要形状以某种方式重叠以获得您想要的斑驳光线效果，它们不必完全对齐即可。因此，不必严格按照我在这里在 CSS 中定位事物的方式操作。事实上，我鼓励您尝试使用不同的值来获得不同的斑驳光线图案！

在 CSS 中设置斑驳光线样式

这些是表情符号应具有的关键属性——transparent颜色、黑色半透明背景（在rgba()中使用 alpha 通道）、模糊的白色text-shadow以及不错的较大font-size，最后，一个mix-blend-mode来使一切变得流畅。

.shapes {
  color:  transparent;
  background-color: rgba(0, 0, 0, 0.3); // Use alpha transparency
  text-shadow: 0 0 40px #fff; // Blurry white shadow
  font: bolder 320pt/320pt monospace;
  mix-blend-mode: multiply;
}

mix-blend-mode设置元素的颜色与其容器元素内容的颜色如何混合。multiply值会导致元素的背景显示在元素的浅色部分，并保持深色部分不变，从而产生更美观、更自然的斑驳光线效果。

细化颜色和对比度

我希望背景上的background-image更亮一些，因此我还添加了filter: brightness(1.6)。另一种方法是使用background-blend-mode，其中元素的所有不同背景都混合在一起，并且，而不是将表情符号添加为单独的元素，我们将其添加为背景图像。

请注意，在最后一个示例中，我使用了不同的表情符号，以及floralwhite来获得一些比纯白色更柔和的光线颜色。以下是一个展开的表情符号背景图像

<svg xmlns='http://www.w3.org/2000/svg'> 
  <foreignObject width='400px' height='240px'> 
    <div xmlns='http://www.w3.org/1999/xhtml' style=
      'font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);'
    >
      🌾
    </div> 
  </foreignObject> 
</svg>

如果您想使用自己的形状图像，请确保边界模糊以创建柔和的光线。CSS blur() 过滤器可以方便地用于相同的事情。我还使用 CSS @supports调整某些浏览器的阴影模糊值作为回退。

现在让我们回到第一个示例并添加一些内容

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes">\</p>
</div>

<p class="content">
  <img width="70px" style="float: left; margin-right: 10px;" src="image.jpeg" alt="">
  Top ten tourists spots for the summer vacation <br><br><i style="font-weight: normal;">Here are the most popular places...</i>
</p>

.backdrop和.shapes基本上与之前相同。至于.content，它也位于.backdrop的顶部，我添加了isolation: isolate来形成一个新的堆叠上下文，将元素排除在混合之外，作为一种细化处理。

动画光源

我还决定使用@keyframes添加一个简单的 CSS 动画，这些动画应用于.backdrop的:hover状态。

.backdrop:hover > .shapes:nth-of-type(1){
  animation: 2s ease-in-out infinite alternate move;
}
.backdrop:hover > .shapes:nth-of-type(2):hover{
  animation: 4s ease-in-out infinite alternate move-1;
}

@keyframes move {
  from {
    text-indent: -20px;
  }
  to {
    text-indent: 20px;
  }
}
@keyframes move-1 {
  from {
    text-indent: -60px;
  }
  to {
    text-indent: 40px;
  }
}

为表情符号产品上的text-indent属性设置动画会产生非常微妙的运动——就像您可能期望的从头顶移动的云层改变光线方向的那种运动。只是一点优雅，你知道的。

总结

就是这样！我们从自然和艺术中汲取灵感，模仿那些部分多云的日子，阳光透过树木和灌木丛，在表面投射出斑驳的光线和阴影斑点。我们用少量 CSS 和一些表情符号完成了所有这些操作。

关键在于我们如何在表情符号上应用颜色。使用额外的模糊text-shadow以浅色设置光线，并使用半透明的background-color定义阴影斑点。从那里，我们所要做的就是确保光线和阴影的背景使用逼真的纹理，并具有足够的对比度，以便在实际操作中看到斑驳的光线效果。