宁静的CSS斑驳的光线效果

早晚的阳光透过沙沙作响的树叶，有一种宁静的温暖。艺术家们利用斑驳的光线来创造一种柔和的、催眠的效果。

罗恩-多努格的《贝德福德住宅》(2013)

我们可以在网页设计中创造同样的斑驳光线效果，在照片和插图上使用它，为本来可能是单调的内容墙添加神奇的触感，使它们重新焕发活力。

我将给你一个简单、快速的方法来添加这种效果......只用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;
}

CodePen嵌入回退

mix-blend-mode 设置一个元素的颜色如何与它的容器元素的内容相融合。 值使一个元素的背景通过该元素的浅色显示出来，并使深色保持不变，从而得到一个更漂亮、更自然的斑驳光影效果。multiply

完善颜色和对比度

我希望背景上的background-image 更加明亮一些，所以我还添加了filter: brightness(1.6) 。另一种方法是用 background-blend-mode来代替，一个元素的所有不同背景都被混合在一起，而且，我们不是把表情符号作为单独的元素来添加，而是把它们作为背景图片来添加。

CodePen嵌入回退

请注意，我在最后一个例子中使用了不同的表情符号，以及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 .backdropisolation: 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;
  }
}

CodePen嵌入回退

动画表情符号上的text-indent 属性是一种超级微妙的运动--你可能期望从头顶上移动的云彩改变光线的方向的那种。你知道的，只是一丝优雅。

收尾工作

我们已经有了!我们从自然和艺术中汲取了一些灵感，来模仿那些部分阴天，阳光透过树木和灌木丛，投射出斑驳的光线和阴影点在表面。我们用一小撮CSS和一些表情符号完成了所有这些工作。

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