CSS线性渐变的凹面矩形过渡动效的实现

站长资源 2024/11/24 佚名

14 1538 14

DDR爱好者之家 Design By 杰米

本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路，主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案，欢迎在评论区和我讨论。

上图

实现凹面矩形

实现这个样式的灵感来自网上一篇使用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,线性渐变,凹面矩形,过渡

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“CSS线性渐变的凹面矩形过渡动效的实现”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

CSS线性渐变的凹面矩形过渡动效的实现

CSS 说明横向进度条最后显示文字的实现代码

CSS3制作3D立方体loading特效

评论“CSS线性渐变的凹面矩形过渡动效的实现”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接