naiveUI 里的图标可以通过给 icon 添加属性 color 来修改 svg 图标的颜色 像这样
<n-button>
<template #icon>
<n-icon color="red">
<HourglassOutline />
</n-icon>
</template>
</n-button>
后来我想要把这个颜色换成彩色动画,然后我去搜索了相关信息, 找到了一个修改 background 属性的方法...但是这不是我要的效果,我就是希望里面的那个图标渐变就好,我试过加一个 background-clip,加完之后就没效果了,图标变成黑色了,请问有什么好的方法可以实现我要的效果吗?
<n-button>
<template #icon>
<n-icon class="Gradient">
<HourglassOutline />
</n-icon>
</template>
</n-button>
@property --colorA {
syntax: '<color>';
inherits: false;
initial-value: fuchsia;
}
@property --colorC {
syntax: '<color>';
inherits: false;
initial-value: #f79188;
}
@property --colorF {
syntax: '<color>';
inherits: false;
initial-value: red;
}
.Gradient {
background: linear-gradient(45deg,
var(--colorA),
var(--colorC),
var(--colorF));
animation: change 5s infinite linear;
/* background-clip: text; */
}
@keyframes change {
20% {
--colorA: red;
--colorC: #a93ee0;
--colorF: fuchsia;
}
40% {
--colorA: #ff3c41;
--colorC: #e228a0;
--colorF: #2e4c96;
}
60% {
--colorA: orange;
--colorC: green;
--colorF: teal;
}
80% {
--colorA: #ae63e4;
--colorC: #0ebeff;
--colorF: #efc371;
}
}
1
xuchunyang 236 天前
试试直接在 SVG 代码中调整
|
2
LavaC 236 天前
没用过 nativeUI ,如果这个 svg 是以 base64 形式存在于 background-image 上的话,可以将值赋予给 mask-image 做一个遮罩,再用背景覆盖。
不过总的来说这个方法实现的效果很糙,最好还是直接从 svg 本身入手。 |
3
ntedshen 236 天前
讲道理用 iconfont 多好。。。
试试看 css3 的 mix-blend-mode ? |
4
wingzhingling 235 天前 via Android
给 color 绑定一个变量,写个 setInterval 循环变换 color 的值,css 设置一下 transition 时间
|
5
weixiaoD OP @wingzhingling 这种只能设置单一色彩吧,不能渐变那种效果,像我 gif 那样
|
6
weixiaoD OP @xuchunyang 没接触过 svg 动画,哈哈,有空再看看
|