本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路，主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现 方案 ，欢迎在评论区和我讨论。
上图
实现凹面矩形
实现这个样式的灵感来自网上一篇使用css实现内凹角的 文章 ，描述如何实现ch rom e标签页的内凹角效果，大概是下面这样子：
使用 radial-gra die nt 径向渐变来实现，将渐变的模糊 距离 缩小到0就能看到清晰的 圆 形界限。 按照这个思路就能实现内凹矩形的样式了，通过 调整 渐变的 pos IT ion 控制中心 点的位置，调整径向圆的size可以控制凹面的弯曲程度，就像下面这样：
可以在MDN的径向渐变demo里调试：
background: radial-gradient(300px 300px at 112px 0, # eee 75%, #333 75%);
小 细节
@H_ 512 _46@径向渐变如果模糊距离为0，会看到圆形的边界有很明显的锯齿，增加1px的模糊距离可以消除锯齿。（这就是传说中的抗锯齿吗？） and ROI d 4.4.4不兼容径向渐变。实现线性渐变的凹面矩形
上一节已经实现了凹面矩形，那如何给凹面矩形再设置线性渐变呢？background已经被使用了，不能又设置径向渐变又设置线性渐变。
可以使用 mask -i mage 来实现抠图的效果，MDN的例子：
MDN的例子使用五角星形状的svg在绿色的背景上抠图得到了绿色的五角星，要实现渐变的凹面矩形可以用凹面矩形的形状在线性渐变的背景上抠图。
用 mask-image 设置形状， background 设置线性渐变：
.xxx {
background: linear-gradient(115 deg , #ff66ff, #4db8ff);
mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);
}
效果：
小细节
mask-image在移动端的兼容性竟然比径向渐变要好， 安卓 4.4.4是支持的。
渐变背景色的过渡
&nbs p;
background-image本身是不支持 过渡动画 的，但是可以通过一些骚操作来实现，张鑫旭老师的文章说得非常详细：
https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/
https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/
background-image不支持过渡动画，但是opacity支持呀，在之前的线性渐变凹面矩形上再叠加一层伪元素，设置伪元素背景色为另一个线性渐变色，然后控制伪元素的opacity，实现线性渐变过渡效果。
到此这篇关于CSS线性渐变的凹面矩形过渡动效的实现的文章就介绍到这了,更多相关CSS线性渐变凹面矩形过渡内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS线性渐变的凹面矩形过渡动效的实现 全部内容，希望文章能够帮你解决 CSS线性渐变的凹面矩形过渡动效的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS线性渐变的凹面矩形过渡动效的实现的详细内容...