最近在做关于宝可梦图鉴的小绿书,我打算制作“我是谁”的图片作为封面,来吸引读者点击进来,本来打算找素材自己用ps
做做的,后来发现太麻烦了,为什么不用写一个工具来解决这个问题呢?ok行动。

数据源
宝可梦官方是提供了相关的接口的https://pokeapi.co/api/v2/pokemon
,我们直接拿来用,轻松解决数据源的问题。
接口提供了宝可梦的基础数据,比如编号,名称,数值,图片等等。
实现剪影效果
这是我最关心的需求,一串css代码轻松实现。filter: brightness(0) saturate(100%) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
- brightness: 调整元素的亮度,参数设为表示将亮度降为 0%,即完全变黑。如果是带有透明度的png,那么就会把非透明的
地方变黑,周围依旧是透明,这就形成了剪影
的效果。 - saturate: 调整元素的颜色饱和度
- drop-shadow: 给元素添加一个阴影效果(类似于 box-shadow,但适用于非矩形形状)
哦对了,我最近开发了一个叫
牛马工作器
的chrome拓展插件,很好玩哦,感兴趣的话,给我的公众号回复牛马
即可免费获取。