日期:2021-09-09 分类:知识

今天折腾的时候突然有一个比较特殊的需求,就是添加一个效果,具体的效果可以下面文章的截图部分:

如果你是前端达人的话,估计根本不值一提,但是我先说说我的情况。

这个图标的背景色是通过PHP动态生成的,所以通过CSS实现图标周边虚化的效果仅仅只能到虚化程度,但是无法添加和按钮同样的颜色。鉴于颜色是随机的,固定的CSS已经不再考虑范围了。

这里需要说明一下,这个虚化的效果是通过before的效果实现的,不要问我为什么要通过before实现,因为这个效果我是从别的站点扒下来的,他就是用的before效果,只不过差别就是我的颜色是随机的,他的是写死的。

经过思考,我能想到的就是通过JS来实现了,首先获取按钮的颜色,然后通过JS修改before的背景颜色,说干就干,但是干到一半发现代码都没错,可视就是不出效果,经过谷歌之后了解到原来我的想法是行不通的,并不能直接通过JS修改伪元素的属性值,那么只能曲线救国了,直接通过头部加载sytle样式,强制修改即可,虽然这样可能会造成所有同类元素都变成同样的颜色,但是好在我需要修改的对象在每篇文章里面仅存在一个,所以我的目的达到了。

那么关于这方面我也继续了解了一下,方法确实是有。但是感觉都来的比较复杂,针对我的情况,头部直接加载CSS是最直接且有效果的。

下面是几个来网络的介绍内容: