7 个超棒的 CSS 卡片：🎰 茶杯头风格 ☕️ +（动画、纯 CSS、教程）
介绍
演示
完整页面演示（GitHub Pages）
01. 肋排🥊
02. 呱呱叫🥊
03. Chauncey Chantenay 🥕
04. 茶杯头☕️
05. 卡格尼康乃馨🌸
06. 国王骰子🎰
07. King Dice：赌场🎰
结论
剧终
介绍
几年前，我偶然玩了一款叫《茶杯头》的游戏。通关之后，我以为很快就会把它忘掉，转而玩别的游戏。但事与愿违。我太喜欢这款游戏的风格了，根本不想就此忘记。于是，我决定GIF在网上找一些图片，然后CSS Cards根据它们创作各种各样的作品。
好了，让我们进入正题吧。
演示
对于不想阅读全文的人，我建议直接查看最终项目。
您也可以从我的网站下载该项目GitHub repository。（网站上也有演示GitHub Pages）。
描述
这个网站展示的是我专门为作品集创作的作品示例。如果您想查看，可以点击下方链接。
运用科技。
本项目采用了以下技术：
任务管理器
软件平台
预处理器
图书馆
软件包管理器
插件
为了通过 gulp 开发该项目，我使用了以下几种类型的 NPM 插件：
…
完整页面演示（GitHub Pages）
01. 肋排🥊
第一张卡片献给游戏中最早出现的 Boss 之一，一只名叫Ribby的战斗蟾蜍。这张卡片的画面取自拳击台的视频（你可以看到背景中绷紧的绳索）。
制作这张卡片时，使用了简单的几何形状，例如三角形和立方体。您可以根据需要编辑卡片上的每个元素（color，，，）。sizefontetc.
这也适用于其他卡片。
02. 呱呱叫🥊
Croaks他是游戏中的另一个 Boss，也是 Ribby 的兄弟。战斗中，他们会联手攻击，你需要抵挡住他们的联合攻击。
这张卡片由简单的元素组成。背景中还有一个渐变色，形成一个brick wall……
03. Chauncey Chantenay 🥕
Chauncey Chantenay是一根体型庞大、拟人化的橙色胡萝卜，有着细长的手臂和黄白相间的眼睛。
这张卡片的设计完全由字体构成。
你还可以看到一些立方体first card。
04. 茶杯头☕️
一张简洁但又非常精美的卡片，描绘了游戏《茶杯头》的主角。
05. 卡格尼康乃馨🌸
Cagney他很狡猾。他似乎很喜欢用外表迷惑敌人，先伪装成一朵无害可爱的花朵，然后突然发出震耳欲聋的咆哮，露出真面目。
这张卡片使用了多个三角形，并在三角形内部放置了动画线性渐变。
06. 国王骰子🎰
King Dice是某人的得力助手Devil，也是《茶杯头》中的第二反派角色。
卡片由最简单的元素组成，并配有角色图像。
07. King Dice：赌场🎰
这张牌在实际运用中难度最高。它是last levels游戏中一种玩法的体现，以卡片的形式呈现，roulette table玩家可以在卡片上下注。
这张牌最难的地方在于角色create a table所King Dice依赖的东西。
为了实现这个效果，我使用了一种gradient能营造出柔软桌面质感的元素。此外，还有一系列元素lots，您可以根据需要单独编辑每个元素。
此外，还需要制作一个游戏桌面，供主角奔跑玩耍。制作完成后，还需要为桌面设定透视效果，这会影响画面的深度。
结论
对我而言，这纯粹是一个创作项目，我并没有刻意去创作极其复杂的东西来博取眼球。Cuphead我只是被这款游戏的风格所吸引，所以决定创作这些卡牌。
剧终
感谢您关注我的帖子。您也可以在推特上关注我，我也会在那里发布我的许多作品。
再见
文章来源：https://dev.to/kerthin/7-awesome-css-cards-cuphead-style-animation-pure-css-tutorual-44n0
