摘要:蒙版需要引入图片,如果要引入图片那还不如直接叫把这每个进度的图给我算了,又觉得小题大做,所以这里使用蒙版。代码实现首先画出蒙版图形标签用于自定义形状,它内部的代码不会显示,仅供引用。
起因
最近做需求时发现有个这样的UI图
第一眼看到这图时脑子就像着用着几个div加border-radio来实现,仔细一看发现这个图形整体的背景色是带渐变的,那就不能用几个元素去拼凑了,这只能用于单一背景色的图形。
整体带渐变背景色就需要用一个元素去画出这个图形,但是这太麻烦了,还有一种方法就是使用蒙版。前端中蒙版有CSS蒙版,SVG蒙版,Canvas蒙版。CSS蒙版需要引入图片,如果要引入图片那还不如直接叫UI把这每个进度的图给我算了,Canvas又觉得小题大做,所以这里使用SVG蒙版。
代码实现首先画出蒙版图形
再定义下渐变色
再画个矩形,并引入蒙版
注意该元素的位置要在蒙版元素位置内才能看到效果
效果完成
大体上差不多了,在进度显示上只要控制蒙版矩形的宽和圆的个数就可以了。
SVG还有组的概念,试了下在组上加入渐变,结果不行。
然而不行,相当于在每个元素上加了个渐变。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54228.html
摘要:接下来我先以为例,简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一,然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。 蒙版工作原理 设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例,简单解释蒙版的工作原...
摘要:接下来我先以为例,简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一,然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。 蒙版工作原理 设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例,简单解释蒙版的工作原...
摘要:组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像,我们可以使用色键的方式进行抠图生成蒙版。其中,用于更新蒙版的接口为。 导读:本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前,不妨先浏览项目文档,对组件的使用方式和相关接口进行了解。 各位童鞋如果经常上 B 站(bilibili.com) ...
阅读 688·2021-11-24 10:30
阅读 1225·2021-09-24 09:48
阅读 3049·2021-09-24 09:47
阅读 3525·2019-08-29 17:11
阅读 2849·2019-08-29 15:38
阅读 2244·2019-08-29 11:03
阅读 3567·2019-08-26 12:15
阅读 983·2019-08-26 10:45