在上一篇 巧用濾鏡實作進階感拉滿的文字快閃切換效果 中，我們提到了一種非常有意思的之前蘋果展示文字的動畫效果。
本文，會帶來另外一個有意思的效果，巧用漸變實作進階感拉滿的背景光動畫。此效果運用在蘋果官網 iPhone 13 Pro 的介紹頁中：
這個效果想利用 CSS 完全複制是比較困難的。CSS 模拟出來的光效陰影相對會 Low 一點，隻能說是盡量還原。
其實每組光都基本是一樣的，是以我們隻需要實作其中一組，就幾乎能實作了整個效果。
觀察這個效果：
它的核心其實就是角向漸變 -- <code>conic-gradient()</code>，利用角向漸變，我們可以大緻實作這樣一個效果：
看看效果：
有點那意思了。當然，仔細觀察，漸變的顔色并非是由一種顔色到透明就結束了，而是顔色 A -- 透明 -- 顔色 B，這樣，光源的另一半并非就不會那麼生硬，改造後的 CSS 代碼：
我們在角向漸變的最後多加了一種顔色，得到觀感更好的一種效果：
emm，到這裡，我們會發現，僅僅是角向漸變 <code>conic-gradient()</code> 是不夠的，它無法模拟出光源陰影的效果，是以必須再借助其他屬性實作光源陰影的效果。
這裡，我們會很自然的想到 <code>box-shadow</code>。這裡有個技巧，利用多重 <code>box-shadow</code>， 實作 Neon 燈的效果。
我們再加個 div，通過它實作光源陰影：
OK，光是有了，但問題是我們隻需要一側的光，怎麼辦呢？裁剪的方式很多，這裡，我介紹一種利用 <code>clip-path</code> 進行對元素任意空間進行裁切的方法：
原理是這樣的：
這樣，我們就得到了一側的光：
這裡，其實 CSS 也是有辦法實作單側陰影的（你所不知道的 CSS 陰影技巧與細節），但是實際效果并不好，最終采取了上述的方案。
接下來，就是利用定位、旋轉等方式，将上述單側光和角向漸變重疊起來，我們就可以得到這樣的效果：
這會，已經挺像了。接下來要做的就是讓整個圖案，動起來。這裡技巧也挺多的，核心還是利用了 CSS @Property，實作了角向漸變的動畫，并且讓光動畫和角向漸變重疊起來。
我們需要利用 CSS @Property 對代碼漸變進行改造，核心代碼如下：
這樣，我們就實作了完整的一處光的動畫：
我們重新梳理一下，實作這樣一個動畫的步驟：
利用角向漸變 <code>conic-gradient</code> 搭出基本架構，并且，這裡也利用了多重漸變，角向漸變的背後是深色背景色；
利用多重 <code>box-shadow</code> 實作光及陰影的效果（又稱為 Neon 效果）
利用 <code>clip-path</code> 對元素進行任意區域的裁剪
利用 CSS @Property 實作漸變的動畫效果
剩下的工作，就是重複上述的步驟，補充其他漸變和光源，調試動畫，最終，我們就可以得到這樣一個簡單的模拟效果：
由于原效果是 <code>.mp4</code>，無法拿到其中的準确顔色，無法拿到陰影的參數，其中顔色是直接用的色闆取色，陰影則比較随意的模拟了下，如果有源檔案，準确參數，可以模拟的更逼真。
完整的代碼你可以戳這裡：CodePen -- iPhone 13 Pro Gradient
本文更多的是圖一樂呵，實際中制作上述效果肯定是有更為優雅的解法，并且利用 CSS 模拟的話，也應該有更好的方法，這裡我僅僅是抛磚引玉，過程中的 1、2、3、4 技巧本身有一些還是值得借鑒學習的。
好了，本文到此結束，希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。