JJ Abrams電影的忠實影迷一定對影片中精巧的劇情、妙語連珠的對話，以及標誌性的變形鏡頭光暈印象深刻。 Abrams等電影製作人巧妙地運用鏡頭光暈，為電影增添一絲“手工製作”的真實感。這種技巧我們很容易就能在Photoshop等工具中復制，然後將其作為光柵圖像添加到我們的網站中。
但如果我們想在無需使用圖像編輯工具的情況下實現同樣的鏡頭光暈效果呢？我們可以創建一個CSS鏡頭光暈，為我們的圖庫圖像、背景照片或用戶頭像增添電影般的質感。
攝影中存在不同類型的鏡頭光暈。我們正在處理的是一種被稱為偽影的現象，它們會在光線進入並從鏡頭表面反射的地方留下小的光斑，形狀類似於相機的光圈。
這是一個我們即將製作的鏡頭光暈的優秀示例，自然地，它直接取自JJ Abrams電影的劇照：
上面的鏡頭光暈包含幾個部分。讓我們列出它們，以便知道我們的目標：
我們從下面與光暈組件相對應的HTML元素開始。有一個中心光源和兩個偏離對角線的圓形光暈，三個水平鏡頭光暈和三個錐形光線狀光暈。
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
最後，為了使我們的鏡頭光暈能夠真實地疊加在圖像上，它的中心光源必須是可調整的。這樣，我們就可以將它放置在圖片上一個可信的現有光源上，而不會與任何面部重疊。
讓我們從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度錐形漸變。
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的角，我們將使用我們的光源作為其原點對其進行旋轉變換，從而產生偏移漫射光線濾鏡效果。
到目前為止，我們已經創建了一個響應式但靜態定位的鏡頭光暈效果，它位於固定位置。如果不破壞周圍的水平和錐形光暈，就很難調整鏡頭光暈的中心。
為了使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鏡頭光暈效果，使光源位置看起來可信。繼續，添加您自己的照片，看看它在不同環境中的工作效果！
當然，這只是創建CSS鏡頭光暈的一種方法。我喜歡這種方法，因為它在光暈及其部分的顏色、大小和位置方面很靈活。這使得它更像是一個可重用的組件，可以在許多環境中使用。
Keith Grant有一個使用線性漸變以及CSS自定義屬性的示例。然後它在那裡添加一些JavaScript來隨機化HSLA值。
Nicholas Guest還有一個CSS鏡頭光暈，它在.flare元素的::before和::after偽元素上應用一個框陰影來獲得效果，加上一點jQuery，使光暈在懸停時跟隨鼠標。
這個是用Canvas製作的，它巧妙地展示了光源如何在懸停時跟隨鼠標，同時顯示鏡頭光暈偽影如何隨著光源位置的變化而改變位置。
這裡有同樣的想法：
還有一個有趣的例子，它使用了GSAP、Canvas和一個名為JS.LensFlare的庫：
您將如何處理CSS鏡頭光暈效果？在評論中分享您的想法！
以上是將CSS鏡頭耀斑添加到照片中，以使觸感明亮的詳細內容。更多資訊請關注PHP中文網其他相關文章！
