本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路,主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案,欢迎在评论区和我讨论。
上图
实现凹面矩形
实现这个样式的灵感来自网上一篇使用css实现内凹角的文章,描述如何实现chrome标签页的内凹角效果,大概是下面这样子:
使用 radial-gradient
径向渐变来实现,将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 按照这个思路就能实现内凹矩形的样式了,通过调整渐变的 position
控制中心点的位置,调整径向圆的size可以控制凹面的弯曲程度,就像下面这样:
可以在MDN的径向渐变demo里调试:
background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);
小细节
- 径向渐变如果模糊距离为0,会看到圆形的边界有很明显的锯齿,增加1px的模糊距离可以消除锯齿。(这就是传说中的抗锯齿吗?)
- android 4.4.4不兼容径向渐变。
实现线性渐变的凹面矩形
上一节已经实现了凹面矩形,那如何给凹面矩形再设置线性渐变呢?background已经被使用了,不能又设置径向渐变又设置线性渐变。
可以使用 mask-image
来实现抠图的效果,MDN的例子:
MDN的例子使用五角星形状的svg在绿色的背景上抠图得到了绿色的五角星,要实现渐变的凹面矩形可以用凹面矩形的形状在线性渐变的背景上抠图。
用 mask-image
设置形状, background
设置线性渐变:
.xxx { background: linear-gradient(115deg, #ff66ff, #4db8ff); mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%); }
效果:
小细节
mask-image在移动端的兼容性竟然比径向渐变要好,安卓4.4.4是支持的。
渐变背景色的过渡
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,实现线性渐变过渡效果。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览
- 交错战线能源发电站推荐角色一览
- 阿波罗乐神之音《第4集出埃及记》[WAV+CUE]
- JohnWrightTrio-SouthSideSoul-1960-2024(24-192)
- AnthonyBruno-Cefalu(2024)[24-96]
- 《地狱潜者2》玩家人数飙升:终于不再削弱玩家了
- 黑神话引力!外媒分享孙悟空英文书籍:美生中国人等
- 《荒野大镖客》PC版曝光!《GTA6》疑似也有PC版
- 林宥嘉.2008-神秘嘉宾(引进版)【华研国际】【WAV+CUE】
- 徐小凤.1997-金曲精选(康艺经典珍藏系列)【康艺成音】【WAV+CUE】
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧