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