Fügen Sie einen CSS -Objektivflackern zu Fotos für eine helle Note hinzu

JJ Abrams电影的忠实影迷一定对影片中精巧的剧情、妙语连珠的对话，以及标志性的变形镜头光晕印象深刻。 Abrams等电影制作人巧妙地运用镜头光晕，为电影增添一丝“手工制作”的真实感。这种技巧我们很容易就能在Photoshop等工具中复制，然后将其作为光栅图像添加到我们的网站中。

但如果我们想在无需使用图像编辑工具的情况下实现同样的镜头光晕效果呢？我们可以创建一个CSS镜头光晕，为我们的图库图像、背景照片或用户头像增添电影般的质感。

摄影中存在不同类型的镜头光晕。我们正在处理的是一种被称为伪影的现象，它们会在光线进入并从镜头表面反射的地方留下小的光斑，形状类似于相机的光圈。

这是一个我们即将制作的镜头光晕的优秀示例，自然地，它直接取自JJ Abrams电影的剧照：

上面的镜头光晕包含几个部分。让我们列出它们，以便知道我们的目标：

1. 中心光源呈现为一个发光的光球。
2. 有一些水平椭圆形的光线——被扭曲和模糊的光线，形成细长的椭圆形。
3. 随机的光线从中心光源以不同的角度射出。

我们从下面与光晕组件相对应的HTML元素开始。有一个中心光源和两个偏离对角线的圆形光晕，三个水平镜头光晕和三个锥形光线状光晕。

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

最后，为了使我们的镜头光晕能够真实地叠加在图像上，它的中心光源必须是可调整的。这样，我们就可以将它放置在图片上一个可信的现有光源上，而不会与任何面部重叠。

CSS镜头光晕的背景和光源

让我们从CSS镜头光晕的黑色背景和中心光源开始。网络上的大多数渐变都是具有纯色过渡的线性渐变，但我们可以为它们应用alpha通道，这实际上是产生发光效果的一种好方法。具有多层半透明颜色的圆形径向渐变为我们提供了良好的相机中心效果。

 background: radial-gradient(
  closest-side circle at center,
  hsl(4 5% 100% / 100%) 0%,
  hsl(4 5% 100% / 100%) 15%,
  hsl(4 10% 70% / 70%) 30%,
  hsl(4 0% 50% / 30%) 55%,
  hsl(4 0% 10% / 5%) 75%,
  transparent 99%
);
filter: blur(4px);

对HSL语法感到好奇吗？它是新的，并且似乎是定义所有CSS颜色函数中alpha透明度的未来方向。

请注意，我们在这里使用CSS模糊滤镜，使渐变看起来更像散射光层。

现在我们知道了如何添加圆形光晕，我们还将在光源后面添加一个更大的、漫射的光晕，以及三个位于中心45度角的附加光晕，以使效果看起来更逼真。

设置水平光线条纹

让我们从水平光晕开始。我们可以采取一些选项，一个非常细长的椭圆渐变将是最简单的方法。但是，我注意到水平镜头光晕通常不如我的参考照片中的对称，所以我希望我的镜头光晕也稍微不对称一些。

幸运的是，径向渐变在CSS中有一个可选的位置参数。我们可以创建同一水平光晕的两个大小略微不同的左半部分和右半部分，并使用略微不同的颜色。我们还可以添加一个不透明度过滤器，使水平光晕与中心连接的区域看起来不那么突兀。

 background: radial-gradient(
  closest-side circle at center,
  transparent 50%,
  hsl(4 10% 70% / 40%) 90%,
  transparent 100%
);
Filter: Blur (5px);

顺便说一下，让我们还在视口下方四分之三处添加一个完整的细长椭圆形底部光晕，以增添另一种“真实感”。

创建漫射光线

有了径向光晕和水平光晕，剩下的就是从光源射出的倾斜光线。我们可以添加额外的椭圆形径向渐变，然后倾斜和平移容器以获得近似值。但我们还有一个已经为这项工作准备好的CSS渐变，即锥形渐变。下面是一个示例，它为我们提供了一个从其容器的右下角偏移5度的7度锥形渐变。

 Hintergrund: Conic-Gradient (
  from 5deg at 0% 100%,
  transparent 0deg,
  hsl(4 10% 70% / 30%) 7deg,
  transparent 15deg
);
transform-origin: bottom left;
transform: rotate(-45deg);

我们将添加一些以我们的光晕中心为中心的锥形渐变，具有各种半透明颜色的渐变角度。因为锥形渐变可以显示其容器div的角，我们将使用我们的光源作为其原点对其进行旋转变换，从而产生偏移漫射光线滤镜效果。

使用CSS自定义属性创建更灵活的镜头光晕

到目前为止，我们已经创建了一个响应式但静态定位的镜头光晕效果，它位于固定位置。如果不破坏周围的水平和锥形光晕，就很难调整镜头光晕的中心。

为了使CSS镜头光晕既可调整又不太脆弱，我们将通过一组自定义属性公开光源光晕的位置、大小和色调。

 :Wurzel {
  --hue: 4;
  --lens-center-size: 40%;
  --lens-spread-size: 80%;
  --lens-left: 55%;
  --lens-top: 15%;
}

顺便说一下，我们还将调整光晕色调和水平光晕高度的大小。对于水平光晕宽度，我们使用CSS变量重载使其可以单独调整；否则，我们将回退到光源光晕中心或图像中心。

 .left-flare {
  width: var(--left-flare-width, var(--lens-left, 50%));
}

这就是使用照片背景和向上移动的镜头光晕完成的CSS镜头光晕效果，使光源位置看起来可信。继续，添加您自己的照片，看看它在不同环境中的工作效果！

其他CSS和非CSS镜头光晕示例

当然，这只是创建CSS镜头光晕的一种方法。我喜欢这种方法，因为它在光晕及其部分的颜色、大小和位置方面很灵活。这使得它更像是一个可重用的组件，可以在许多环境中使用。

Keith Grant有一个使用线性渐变以及CSS自定义属性的示例。然后它在那里添加一些JavaScript来随机化HSLA值。

Nicholas Guest还有一个CSS镜头光晕，它在.flare元素的::before和::after伪元素上应用一个框阴影来获得效果，加上一点jQuery，使光晕在悬停时跟随鼠标。

这个是用Canvas制作的，它巧妙地展示了光源如何在悬停时跟随鼠标，同时显示镜头光晕伪影如何随着光源位置的变化而改变位置。

这里有同样的想法：

还有一个有趣的例子，它使用了GSAP、Canvas和一个名为JS.LensFlare的库：

您将如何处理CSS镜头光晕效果？ Teilen Sie Ihre Gedanken in den Kommentaren!

Das obige ist der detaillierte Inhalt vonFügen Sie einen CSS -Objektivflackern zu Fotos für eine helle Note hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!