code狂魔

V1

2023/01/15阅读:49主题:萌绿

卧槽!竟然用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元的全套前端教程

分类:

后端

标签:

后端

作者介绍

code狂魔
V1