本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路,主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案,欢迎在评论区和我讨论。
上图
实现凹面矩形
实现这个样式的灵感来自网上一篇使用css实现内凹角的文章,描述如何实现chrome标签页的内凹角效果,大概是下面这样子:
使用 radial-gradient
径向渐变来实现,将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 按照这个思路就能实现内凹矩形的样式了,通过调整渐变的 position
控制中心点的位置,调整径向圆的size可以控制凹面的弯曲程度,就像下面这样:
可以在MDN的径向渐变demo里调试:
background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);
小细节
实现线性渐变的凹面矩形
上一节已经实现了凹面矩形,那如何给凹面矩形再设置线性渐变呢?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线性渐变的凹面矩形过渡动效的实现的文章就介绍到这了,更多相关CSS线性渐变凹面矩形过渡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
本文学习的内容主要如下所示: 1.浏览器支持 2.图片 3.响应式工具 4.遇到的问题 ...
基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更...
浏览器缓存机制 前端缓存分为网络(HTTP)缓存和浏览器本地储存。 HTTP 缓存机制 ...
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体...
格式编码 1、页面宽度请设定在600到800px以内,长度1024px以内。 2、HTML编码请...
传统方法正方形用固定的形式写 直接长=宽写固定的值如下 .box{width: 200px;hei...
1.什么是母校?就是那个你一天骂他八遍却不许别人骂的地方。 2.拍毕业照三秒的...
前言 电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名,其...
首先来简单说一下什么是Sprites,Sprites是一种网页图片应用处理方式。它允许你...
1.我们都在时光里跌跌撞撞地成长,然后一点点离开最初的模样。 2.听得懂歌词的...