卧槽！竟然用CSS打造出了一套逼真的口袋妖怪

哈喽，大家好！,我是前端实验室的大师兄!

「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。 吧

作为一名前端切图崽，相信大家都经常使用CSS画页面。但是你用CSS能把页面样式做到什么程度呢？但是今天给大家介绍一款开源的口袋妖怪全息效果 CSS 样式

这个开源项目是一组高级的 CSS 样式，可为口袋妖怪卡片的表面创建逼真的全息效果，在 GitHub 开源一天内就获得了 2k+ 的 Star。该项目使用CSS + JS + HTML 做出了非常逼真的卡片效果，连光泽都能看的一清二楚。

pokemon-cards-css

pokemon-cards-css使用CSS变换,渐变,过滤等高级属性来模拟神奇宝贝卡片的各种全息效应

安装运行

拉取项目后，进行安装

// 安装依赖
npm i

// 运行
npm run dev

样式功能

所有卡都根据光标位置通过CSS进行3d旋转。不同的卡片有不同的效果，可以完全模拟真实的卡片光息效果

炫光效果

垂直光束全息效果

星系效应的背景效果

辐射效应效果

对角全息效应

还有更多的精灵宝可梦样式，等待着大家去探索

github链接：https://github.com/simeydotme/pokemon-cards-css

文档地址： https://poke-holo.simey.me/

最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。

关注【前端实验室】公众号回复： bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程