用 HTML 和 CSS 绘制考拉
由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!
由于一段时间以来一直没有进行 CSS 艺术创作——主要是因为工作原因——我决定在这个周末创作一些东西。
我当时不知道自己想做什么,只知道不能是旗帜。它必须需要一些阴影和渐变效果……我必须承认,我在这方面遇到了一些困难。是不是因为缺乏练习?
在网上看到一张考拉的卡通图后,我决定以此为灵感进行创作。最终成品和启发我创作的那张图完全不一样,但结果也还不错——虽然我必须承认,它也不是我最喜欢的作品。
您可以在 CodePen 上查看源代码和在线演示:
我费了好大劲才把光影处理好,还试图增加一些“纹理”。希望以后的画作能更好。
此绘图使用了一些常见的 CSS Art 属性:
- 定位
- 自定义属性
- 背景渐变
- 边界半径
- 伪元素
- 阴影
- 面具
- 裁剪路径
- 组合子
- 一些糟糕的编码和重复代码 :-/
我录制了编码过程并分享到了我的 YouTube 频道上。我有一段时间没更新了,这算是一个不错的回归方式。