html
文章平均质量分 79
无心使然云中漫步
这个作者很懒,什么都没留下…
展开
-
svg 基础(十一)滤镜通用属性、in属性
滤镜通用属性属性说明x,y渲染滤镜效果的左上角坐标(默认0)width,height绘制滤镜容器的高宽(默认100%)result用于定义一个滤镜效果的输出名字,以便将其用作另一个滤镜效果的输入in指定滤镜效果的输入源,可以是某个滤镜到导出的result,也可以是特定的值(如下)in属性的6个值取值说明SourceGraphic表示图形元素自身将作为<filter>原语的原始输入SourceAlpha表示图形元原创 2024-02-14 23:38:32 · 491 阅读 · 0 评论 -
svg基础(十)滤镜-feMerge(多滤镜叠加滤镜)
允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点,然后在一个子元素中访问它。原创 2024-02-13 22:58:47 · 414 阅读 · 0 评论 -
svg基础(九)滤镜-feMorphology(形态学)
用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用。适合用来创建轮廓和边界。原创 2024-02-12 23:49:00 · 436 阅读 · 0 评论 -
svg基础(八)滤镜-feTurbulence(湍流)
湍流滤镜,不稳定气流,能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用,能产生非常复杂的质感,利用它可以实现了人造纹理比如说云纹、大理石纹的合成。原创 2024-02-11 14:24:08 · 1288 阅读 · 0 评论 -
svg基础(七)滤镜-feflood,feDisplacementMap 位置替换滤镜
公式:P’(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))此过滤器改变元素和图形的像素位置,形成一个新的图形(比如添加水波纹效果)。此过滤器创建一个矩形,其中填充了指定的的颜色,应用了不透明度值。根据设定的通道颜色对原图的x, y坐标进行偏移。原创 2024-02-10 23:51:15 · 916 阅读 · 0 评论 -
svg基础(六)滤镜-图像,光照效果(漫反射,镜面反射),组合
滤镜从外部来源取得图像数据,并提供像素数据作为输出(意味着如果外部来源是一个 SVG 图像,这个图像将被栅格化。)1.1 用法:1.2 属性:2.1 用法:2.2 属性:3.1 用法:3.2 属性:该滤镜执行两个输入图像的智能像素组合,在图像空间中使用以下 Porter-Duff 合成操作之一:over、in、atop、xor。另外,还可以应用一个智能组件 操作(结果被压到 范围内)。该 arithmetic 操作对组合来自滤镜和来自 滤镜的。如果选择了操作,每个结果像素都要经过下面的方程式的计原创 2024-02-09 11:50:05 · 1195 阅读 · 0 评论 -
svg基础(五)滤镜-高斯模糊,混合模式,偏移,颜色变换
'0.2’矩阵的三个值都获取乘以红色,绿色和蓝色通道。元素的属性改为"SourceAlpha"在Alpha通道使用残影,而不是整个RGBA像素。的值通常为0到1之间的十进制数,在上述例子中,red为0,green和blue为0.9会产生一个明亮的青色。要设置一个变换,将所有不透明区域回执为相同颜色,可以忽略输入颜色和常量。feColorMatrix是一个通用的基元,允许修改任意像素点的颜色或阿尔法值,当。用来以一种通用的方式改变颜色值,可以用来创建一个发光的区域。原创 2024-02-08 17:41:19 · 1233 阅读 · 1 评论 -
svg基础(四)模式(<pattern>)点阵图,棋盘图,网格图,坐标图
pattern标签用于定义以重复平铺方式填充对象的图形。原创 2024-02-07 16:15:12 · 1160 阅读 · 0 评论 -
svg基础(三)分组、渐变
上一篇文章简单介绍了svg常用标签及其属性,本篇主要介绍分组,渐变。原创 2024-02-06 15:40:03 · 812 阅读 · 0 评论 -
svg基础(二)标签和属性
上一篇文章简单介绍了svg基础概念和几个属性,本篇主要介绍svg标签及其属性。原创 2024-02-04 23:37:33 · 1329 阅读 · 0 评论 -
svg基础(一)
可缩放矢量图形( Scalable Vector Graphics),是一种 XML应用。原创 2024-02-03 23:44:57 · 750 阅读 · 0 评论 -
css 三角形实现方式及快速联想记忆
css实现三角形是常见的需求,在此记录如下原创 2023-12-23 00:40:19 · 1155 阅读 · 0 评论 -
HTML CSS 进度条
进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时,使用圆锥渐变时,不同颜色间的衔接处会有明显的锯齿。描述 progress 元素所表示的任务一共需要完成多少工作量,如果不需要进度条渐变,只需要指定渐变颜色为同一颜色即可。,而如果要展示汽车仪表盘当前的速度值,应该使用。)不支持过渡变换的,因此.progress增加。比如,一个需求当前的完成度,应该使用。解决方案:使用CSS@property。存在问题:CSS中,渐变(比如。思路:使用背景色配合百分比。,不会有过渡动画效果。原创 2023-12-17 01:50:58 · 2140 阅读 · 1 评论