在照片上添加CSS镜头光晕以获得明亮的感觉

我是J.J.艾布拉姆斯电影的大粉丝。我喜欢他们紧凑的情节，幽默的对话，当然还有：变形镜头的耀斑。像艾布拉姆斯这样的电影制作人使用镜头炫光来为他们的电影添加一丝 "自制 "的真实感，这种技术我们可以很容易地在Photoshop等工具中重现，然后作为光栅图像添加到我们的网站。

但是，如果我们想在不使用照片编辑工具的情况下应用同样的镜头炫光效果呢？我们可以创建一个CSS镜头耀斑，为我们的画廊图片、背景照片或用户资料添加一个电影般的触摸。

在摄影中，有不同类型的耀斑。我们正在处理的这种被称为人工制品，因为它们会留下一些小的光斑，这些光斑的形状就像相机的光圈，光线进入并从镜头的表面反射出来。

来源：维基百科

这里有一个很好的例子，说明了我们要做的那种镜头闪光，自然是直接从J.J.艾布拉姆斯的电影剧照中提取的。

星际迷航》（2009）。

上面的镜头炫光有几个部分。让我们把它们列出来，以便我们知道我们的目标是什么。

1. 中心光源看起来是一个发光的光球。
2. 有一些水平的椭圆光条纹--光线被扭曲和模糊，导致拉长的椭圆。
3. 随机的光线从中心光源处以不同角度射出。

我们从下面的HTML元素开始，映射到我们的耀斑组件。有一个中心光源和两个偏离对角线的圆形耀斑，三个水平透镜耀斑，以及三个圆锥形射线状耀斑。

<div class="lens-center"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="left-flare horizontal-flare"></div>
    <div class="right-flare horizontal-flare"></div>
    <div class="full-flare horizontal-flare"></div>
    <div class="conic-1"></div>
    <div class="conic-2"></div>
    <div class="conic-3"></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模糊过滤器，使渐变看起来更接近于散射光层。

现在我们知道了如何添加圆形耀斑，我们还将在光源后面添加一个更大的、扩散的耀斑，以及三个额外的耀斑，从中心的角度45deg ，以使效果看起来更真实。

CodePen 嵌入回落

设置水平光条纹

让我们从水平耀斑开始。我们可以有几个选择，一个非常拉长的椭圆渐变是最简单的方法。然而，我注意到，水平镜头耀斑通常没有我的参考照片中的那么对称，所以我想让我的也不那么对称。

幸运的是，径向渐变在CSS中有一个可选的位置参数。我们可以在同一个水平耀斑上创建两个大小略有不同的左右部分，而且颜色也略有不同。我们还可以添加一个不透明度过滤器，使水平耀斑连接中心的区域，使耀斑不那么刺眼。

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

当我们在做的时候，让我们也添加一个完整的拉长的椭圆底部耀斑，在视口的四分之三处，以获得另一种 "真实感"。

CodePen嵌入回退

创建散射光线

有了径向和横向的耀斑，我们剩下的就是从光源射出的有角度的光线。我们可以添加额外的椭圆径向渐变，然后倾斜和平移容器以获得一个近似的效果。但是我们也有一种CSS渐变，已经为这个工作做了准备，那就是圆锥渐变。5deg 下面是一个例子，它为我们提供了一个7deg ，从其容器的右下角偏移的圆锥梯度。

background: 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 ，我们将以我们的光源为原点对它们进行旋转变换，从而产生一个偏移的扩散射线滤镜效果。

CodePen 嵌入回退

使用CSS自定义属性来获得更灵活的镜头炫光效果

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

为了使CSS镜头耀斑既可调整又不那么脆，我们将通过一组自定义属性来暴露光源耀斑的位置、大小和色调。

:root {
  --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镜头耀斑效果的样子，有一张照片背景，镜头耀斑向上移动，这样光源位置看起来就很可信。来吧，添加你自己的照片，看看它在不同环境下的效果如何

CodePen 嵌入回退

其他CSS和非CSS镜头炫光的例子

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

这是Keith Grant的作品，使用了线性渐变和CSS自定义属性。然后，它在那里撒了一些JavaScript来随机化HSLA的值。

CodePen 嵌入回落

.flare Nicholas Guest有另一个CSS镜头炫光，在::before 和::after 伪元素上应用了一个盒子阴影，以获得效果，再加上一点jQuery，使炫光在悬停时跟随鼠标。

CodePen 嵌入回退

这个是用Canvas制作的，整齐的光源在悬停时跟随鼠标，同时显示了随着光源位置的变化，镜头耀斑的神器是如何改变位置的。

CodePen 嵌入回溯

这里也有同样的想法。

CodePen Embed Fallback

还有一个有趣的，使用GSAP、Canvas和一个叫做JS.LensFlare的库。

CodePen Embed Fallback

你会如何处理一个CSS镜头闪光的效果？请在评论中分享!

---

在照片上添加CSS镜头炫光以获得明亮的触感最初发表于CSS-Tricks。你应该收到通讯。