发布于 2026-01-06 1 阅读
0

用 HTML 和 CSS 绘制考拉 DEV 的全球展示挑战赛,由 Mux 呈现:展示你的项目!

用 HTML 和 CSS 绘制考拉

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

由于一段时间以来一直没有进行 CSS 艺术创作——主要是因为工作原因——我决定在这个周末创作一些东西。

我当时不知道自己想做什么,只知道不能是旗帜。它必须需要一些阴影和渐变效果……我必须承认,我在这方面遇到了一些困难。是不是因为缺乏练习?

在网上看到一张考拉的卡通图后,我决定以此为灵感进行创作。最终成品和启发我创作的那张图完全不一样,但结果也还不错——虽然我必须承认,它也不是我最喜欢的作品。

您可以在 CodePen 上查看源代码和在线演示:

我费了好大劲才把光影处理好,还试图增加一些“纹理”。希望以后的画作能更好。

此绘图使用了一些常见的 CSS Art 属性:

  • 定位
  • 自定义属性
  • 背景渐变
  • 边界半径
  • 伪元素
  • 阴影
  • 面具
  • 裁剪路径
  • 组合子
  • 一些糟糕的编码和重复代码 :-/

我录制了编码过程并分享到了我的 YouTube 频道上。我有一段时间没更新了,这算是一个不错的回归方式。

文章来源:https://dev.to/alvaromontoro/drawing-a-koala-with-html-and-css-bpf