10 个完全使用 HTML 和 CSS 创建的角色设计

我总是对你可以用 CSS 做多少感到惊讶。 Web 开发人员知道 CSS 可以让您构建一些令人难以置信的页面布局和自定义动画效果。

但是您也可以将它用于许多有趣的项目。 例如，仅使用 CSS 构建角色设计。 听起来很奇怪吧？

那么它肯定是。 我收集了一些最奇怪（但最酷）的角色设计，全部由 100% 纯 HTML 和 CSS 代码制成。

1. 愤怒的小鸟

谁不喜欢愤怒的小鸟？ 他们从游戏开始，在刺破流行文化后以某种方式获得了自己的电影。

Rachel Bull 的这支笔证明了愤怒的小鸟甚至可以进入 CSS。

具有讽刺意味的是，此页面上有一个图像，它用于在最顶部嵌入自定义类型。 从这些鸟的曲线到自定义渐变的所有其他元素都在纯 CSS 上运行。

也许不是最实用的代码片段，但肯定是一个灵感。

2.科学怪人

玛丽雪莱的科学怪人被广泛称为复活的绿皮生物。 虽然它在技术上是弗兰肯斯坦的怪物，但它并没有很好地从舌头上滚下来。

虽然这个弗兰肯斯坦生物的名字可能有点错误，但它仍然是我见过的最好的角色设计之一。

它只适用于 40 行 HTML，开发人员 Victoria Ninni Bergquist 甚至添加了一些 CSS 来帮助怪物眨眼。 挺整洁的！

3. 玩具总动员外星人

皮克斯的玩具总动员有这么多令人难忘的角色，这些古怪的外星人肯定是演员阵容的一部分。

Sunyoung Park 构建了这支笔作为 CSS 的演示并测试前端编码的边界。 它应该在所有主要浏览器甚至一些较旧的浏览器中正确呈现。 尽管它确实在很大程度上依赖于 rotate() 属性。

幸运的是，这是 CSS 转换功能的一部分，支持可追溯到 IE9+ 的浏览器。 所以这个绿色的小外星人可以让大多数互联网连接的世界感到高兴。

4.阿库阿库

如果您有 PlayStation，那么您可能知道 Crash Bandicoot。 好吧，这个名叫 Aku Aku 的疯子是面具……生物……东西的完美复制品。

每个元素都有自己的 div，并带有定义该特征的相关类（即眼睛、鼻唇）。

我想说整个设计中最难的部分是他头上的羽毛冠。 再加上很酷的动画，可能会鼓励游戏玩家拿起他们的旧 Crash 游戏。

5. 小松鼠

这是动画与 CSS 角色设计相结合的另一个很好的例子。

Josh Bader 使用纯 CSS 和 15 行 HTML 编写了这个 Squirtle 字符。 感人的！

为了获得行走效果，Josh 将:after伪类附加到每个元素上，并带有重复动画。 一旦你深入了解，这是一个令人惊讶的简单壮举，更令人惊讶的是，构建这样的角色需要这么少的代码。

6. 没有莫蒂的瑞克

在这支笔中，您会发现开发人员 James Gilmore 的古怪作品，他用纯 CSS 制作了一个赤壁的 Rick。

该设计实际上使用了一些漂亮的 CSS 阴影来创建深度并赋予这个角色一些生命。 更不用说与设计完美融合的重复动画了。

请注意，这也可以在 Sass 上运行，如果您想修改它，代码中有自定义变量。 它的格式非常好，所以这将是学习 Sass 的一个很棒的片段。

7.布赖恩格里芬

这是 Rachel Bull 的另一个角色设计，这个角色是 Family Guy 的 Brian Griffin。

令人惊讶的是，仅使用纯 CSS 就能获得如此多的细节。 Brian 的整个风格与节目的艺术风格非常匹配，并且它使用了令人难以置信的逼真的阴影。

虽然这个技术非常好，有超过 150 多行的 CSS，而且它使用 Compass 库来引导。

8. 埃米特

来自乐高电影中的埃米特是他所有的荣耀。 Rachel 再次使用 CSS 和 Haml 从头构建了这个片段，这是编写现代 HTML 的简化方法。

其中一些元素在 CSS 上运行时确实令人印象深刻。 值得注意的是，头发漩涡看起来真的像塑料乐高积木。 疯了，这甚至是可能的！

CSS 中有很多很棒的 Sass 逻辑，如果你是一个开发书呆子，你会喜欢在这支笔周围摸索。 代码和结果都很棒。

9. CSS 伊布

围绕 Pokemon Go 现象构建的是由 David Khourshid 制作的纯 CSS Eevee。

它使用与应用程序相似的背景和页面样式，同时用纯 CSS 重新创建整个 Pokemon。 通过一些纹理和一些智能分层，David 使这款 Eevee 看起来实际上是 3D 的！

动画也很不错，它们使整个事情感觉更真实。 无论您是口袋妖怪的粉丝还是从未接触过这款游戏，您都必须承认这是一项出色的工作。

10. 米老鼠

虽然这个米老鼠头有点简单，但它也是一项壮举。 你可能认为它更容易管理，因为它是静态的，但是笔推动了 450 多行Sass。

最具技术性的部分是按顺序排列所有形状并重新排列元素以正确对齐彼此。

然而结果非常棒，你可以看到与早期米奇卡通片的相似之处。

11. 塞尔达公主

我用这个塞尔达角色设计把最好的留到了最后。 她的腿有点短，但整体风格准确。

开发人员 Charlie Marcotte 使用 Sass 和自定义 CSS 转换来排列所有元素。 此外，由于 Pug 预处理器，原始 HTML 得到了相当大的简化。

如果你想突破你的 CSS 知识的极限，为什么不做一个类似的项目呢？ 这是测试您的技能的好方法，您可以随时在下面的评论中分享您构建的任何内容。