CSS線性漸變的凹面矩形過渡動效的實現(xiàn)

發(fā)布時間：2020-11-09 17:18:04 作者：suhangdev

這篇文章主要介紹了CSS線性漸變的凹面矩形過渡動效的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文聊一聊線性漸變的凹面矩形過渡動效的難點和思路，主要介紹凹面矩形實現(xiàn)、給凹面矩形加線性漸變、線性漸變背景色的過渡。如果有更好的實現(xiàn)方案，歡迎在評論區(qū)和我討論。

上圖

實現(xiàn)凹面矩形

實現(xiàn)這個樣式的靈感來自網(wǎng)上一篇使用css實現(xiàn)內(nèi)凹角的文章，描述如何實現(xiàn)chrome標(biāo)簽頁的內(nèi)凹角效果，大概是下面這樣子：

使用 radial-gradient 徑向漸變來實現(xiàn)，將漸變的模糊距離縮小到0就能看到清晰的圓形界限。按照這個思路就能實現(xiàn)內(nèi)凹矩形的樣式了，通過調(diào)整漸變的 position 控制中心點的位置，調(diào)整徑向圓的size可以控制凹面的彎曲程度，就像下面這樣：

可以在MDN的徑向漸變demo里調(diào)試：

background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);

小細(xì)節(jié)

徑向漸變?nèi)绻：嚯x為0，會看到圓形的邊界有很明顯的鋸齒，增加1px的模糊距離可以消除鋸齒。（這就是傳說中的抗鋸齒嗎？）
android 4.4.4不兼容徑向漸變。

實現(xiàn)線性漸變的凹面矩形

上一節(jié)已經(jīng)實現(xiàn)了凹面矩形，那如何給凹面矩形再設(shè)置線性漸變呢？background已經(jīng)被使用了，不能又設(shè)置徑向漸變又設(shè)置線性漸變。

可以使用 mask-image 來實現(xiàn)摳圖的效果，MDN的例子：

MDN的例子使用五角星形狀的svg在綠色的背景上摳圖得到了綠色的五角星，要實現(xiàn)漸變的凹面矩形可以用凹面矩形的形狀在線性漸變的背景上摳圖。

用 mask-image 設(shè)置形狀， background 設(shè)置線性漸變：

.xxx {
  background: linear-gradient(115deg, #ff66ff, #4db8ff);
  mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);
}

效果：