作者：鱼咸4406 | 来源：互联网 | 2022-12-19 15:39
我想要实现的是添加一个text-shadow表情符号,text-shadow颜色是表情符号中最突出的颜色.
我知道有一些Javascript库可以识别图像中最突出的颜色,但由于表情符号在技术上是文本,我不知道我是怎么做的,或者甚至根本不可能.
我会提供一些我已经尝试过的代码,但老实说,我甚至不知道从哪里开始.
.emoji {
text-shadow: 0px 0px 20px rgba(54, 169, 230, 0.65);
padding: 3px 6px;
font-size: 24px;
}
1> sol..：
不使用的另一种方法text-shadow是复制表情符号,将其直接放在原始表面后使其模糊.
您可以直接在HTML中创建副本,或者如果更容易使用js,则如下例所示.
var emoji = document.querySelector("#blur-me");
var copy = emoji.cloneNode(true);
copy.classList.remove("emoji");
emoji.appendChild(copy);
.emoji {
padding: 3px 6px;
font-size: 24px;
position: relative;
display: inline-block;
}
.emoji span {
position: absolute;
left: 6px;
z-index: -1;
filter: blur(10px);
}
2> Temani Afif..：
@Sol提出的另一个答案是使用一个属性来复制图标,而不需要JS.您还可以应用缩放转换以使效果更加明显:
.emoji {
padding: 3px 6px;
margin:0 5px;
font-size: 24px;
position: relative;
display: inline-block;
z-index: 0;
}
.emoji:before {
content: attr(data-icon);
position: absolute;
z-index: -1;
filter: blur(3px);
transform: scale(1.5);
}
京公网安备 11010802041100号