本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路,主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案,欢迎在评论区和我讨论。
上图
实现凹面矩形
实现这个样式的灵感来自网上一篇使用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,实现线性渐变过渡效果。
CSS,线性渐变,凹面矩形,过渡
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 孙露《不让我的眼泪陪我过夜》HQCDII 限量版 [WAV+CUE][517M]
- dnf巴卡尔武器怎么融合
- 魔兽世界wlk最强职业是什么 wlk最吃香最强职业推荐
- dnf巴卡尼单人和多人区别
- 群星《大热唱片DSD》APE+CUE
- 草蜢2012《软硬草蜢》3CD[WAV+CUE整轨]
- 雨林唱片发烧大碟-陈果《明知故犯HQCD》[WAV+CUE]
- 群星.2024-狐妖小红娘月红篇电视剧原声带【恒星引力】【FLAC分轨】
- 许美静.1998-好美静【上华】【WAV+CUE】
- 谭咏麟.1996-独一无二【宝丽金】【WAV+CUE】
- dnf平民怎么弄宠物
- dnf弓箭手职业
- dnf强化基础精通适合哪些职业
- V.A中国管弦乐纪念名盘《乡之音》FLAC
- [雨果]赵鹏《赵鹏·LPCD45》LPCD45[WAV+CUE]