css之线性渐变的凹面矩形过渡动效

﹏ヽ暗。殇╰゛Y 2022-12-20 03:05 138阅读 0赞

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

上图

实现凹面矩形

实现这个样式的灵感来自网上一篇使用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本身是不支持过渡动画的，但是可以通过一些骚操作来实现，张鑫旭老师的文章说得非常详细：

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

background-image不支持过渡动画，但是opacity支持呀，在之前的线性渐变凹面矩形上再叠加一层伪元素，设置伪元素背景色为另一个线性渐变色，然后控制伪元素的opacity，实现线性渐变过渡效果。

[.]: http://www.chinawenhui.net/aiqing/

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 css半透明渐变过渡效果

果图： ![1136726-20190816142758010-671049771.png][] 代码如下： background-image: -w...

秒速五厘米/ 2024年04月20日 10:54/ 0 赞/ 81 阅读

相关 css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)

线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用 -------------------- 线性渐变线性渐变是

￡神魔★判官ぃ/ 2024年03月30日 14:42/ 0 赞/ 76 阅读

相关【Vue Router】014-过渡动效*

1.14 过渡动效\ 1.14.1 概述 > 想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API][]： <route

傷城~/ 2023年10月01日 11:35/ 0 赞/ 32 阅读

相关 CSS3-线性渐变

CSS 通过 `linear-grandient()` 函数来创建一个表示两种或多种颜色的线性渐变的“图像”；其结果属于 <gradient> 数据类型，是一种特别的 <ima

Myth丶恋晨/ 2023年07月02日 04:24/ 0 赞/ 123 阅读

相关用了很多动效，介绍 4个很 Nice 的 Vue 路由过渡动效！

> 作者：Ahmad shaded > 译者：前端小智 > 来源：sitepoint > 点赞再看，养成习惯 > > 本文 `GitHub` https://git

朴灿烈づ我的快乐病毒、/ 2023年01月13日 05:40/ 0 赞/ 120 阅读

相关 css之线性渐变的凹面矩形过渡动效

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

﹏ヽ暗。殇╰゛Y/ 2022年12月20日 03:05/ 0 赞/ 139 阅读

相关 CSS3 线性渐变效果

CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial

小鱼儿/ 2022年11月12日 08:25/ 0 赞/ 237 阅读

相关 CSS线性渐变，径向渐变

线性渐变： background-image: linear-gradient(to bottom,red 0px,yellow 100px); ![watermark

曾经终败给现在/ 2022年09月03日 13:12/ 0 赞/ 272 阅读

相关 vue-router 中的过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： <transition> <r

曾经终败给现在/ 2022年05月19日 03:21/ 0 赞/ 238 阅读

相关 css 线性渐变

线性渐变 background:linear-gradient(方向,颜色1，颜色2,..); 方向默认从上往下自定义方向

傷城~/ 2021年07月24日 14:36/ 0 赞/ 597 阅读