网站建设   网站建设技术   网页设计   html/css  

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

人浏览  发布时间:2021-02-05

这篇文章主要介绍了CSS线性渐变的凹面矩形过渡动效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学...
这篇文章主要介绍了CSS线性渐变的凹面矩形过渡动效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

上图

实现凹面矩形

实现这个样式的灵感来自网上一篇使用css实现内凹角的文章,描述如何实现chrome标签页的内凹角效果,大概是下面这样子:

使用 radial-gradient 径向渐变来实现,将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 按照这个思路就能实现内凹矩形的样式了,通过调整渐变的 position 控制中心点的位置,调整径向圆的size可以控制凹面的弯曲程度,就像下面这样:

可以在MDN的径向渐变demo里调试:

background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);

小细节

  1. 径向渐变如果模糊距离为0,会看到圆形的边界有很明显的锯齿,增加1px的模糊距离可以消除锯齿。(这就是传说中的抗锯齿吗?)
  2. 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线性渐变的凹面矩形过渡动效的实现的文章就介绍到这了

(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图