CSS 卡通

2025-06-04

CSS 卡通

comiCSS本周迎来两周年了。为了庆祝这一天,我发布了一幅每日漫画。以下是七幅漫画的合集。

comiCSS 是一部用 CSS 编写的关于 CSS 的漫画。没错,漫画和动画全部用 HTML 和 CSS 编写(除了几个 SVG 例外,它们内部也使用了 CSS)。没错,我已经做了两年了。为什么?因为它很有趣,它们可能有点傻,但我希望它们也能有教育意义(有些更有教育意义)……而且,为什么不呢?

这是我这周创作的漫画合集。希望你们喜欢。

云开发人员

卡通人物在使用电脑,背景是云朵,旁边是一个带有以下 CSS 代码的框:.cloud-developer { background: azure; isolate: isolate; rest: none; stress: 100; content: none; }

有趣的事实:这部动画片的背景颜色确实是“天蓝色”。


国王

卡通画中,一位留着胡须、头戴王冠、手握权杖的男子,旁边是一个带有以下 CSS 代码的盒子:.king {position:absolute;richness:100;color:RoyalBlue;:first-child{all:inherit;}}

有趣的是:国王的长袍是“皇家蓝”色。这部动画片是该系列所有动画片中在社交媒体上最成功的一部。


歌剧魅影

歌剧魅影的卡通形象(一个身披斗篷、戴着面具遮住脸的男人)手里拿着一朵玫瑰,旁边是以下 CSS 代码:#phantom-of-the-opera { mask:url(#face); backface-visibility:hidden; visibility:hidden; pitch:low;volume:soft; }

我喜欢这个想法,但具体实施起来还需要更完善。我仍然觉得它有潜力……也许改天我可以改进一下……


优胜者

卡通人物高举手臂,手捧奖杯,五彩纸屑在他们周围飘落。场景旁边是以下 CSS 代码:#winner { order: 1; running: first; color: gold; &::after { content: 'trophy'; } }

有人建议内容应该是“全部”,关于ABBA的《胜者为王》 ……我真后悔自己没想过这个问题。不过,我还是保留了奖杯。


独裁者

独裁者:一个身穿军装、佩戴勋章和太阳镜的男子的简约卡通形象,旁边是以下 CSS 代码:.dictator {position:fixed!important;will-change:order!important;opacity:0!important;border:double solid!important;.country:has(&):not(.supporter) {will-change:orphans,widows!important;translate:100vmax 0!important;} }

这幅漫画比我以往出版的作品要阴暗得多。直到最后一刻,我还在犹豫是否要删除“orphans和”的引用。widows


篮球运动员

篮球运动员:一个极简主义的卡通人物,用一根手指旋转篮球,旁边是以下 CSS 代码:.basketball-player {elevation:higher; min-height:75in; max-height:91in; will-change:position; play-during:url(#game);position:running(ball);flow:'offense';}

有趣的是:NBA历史上最高的球员(至今)是马努特·波尔,身高7英尺7英寸……或者说91英寸。这倒是给大个子球员一个小小的暗示。


宇航员

宇航员:一幅极简主义的卡通画,画中身着宇航服的宇航员,背景中星光熠熠。其后是以下 CSS 代码:.astronaut { elevation: above; isolation: isolate; flow-from: spaceship; flow-to: outerspace; transition: float; }

我在两个选择器之间犹豫不决:.astronaut#MajorTom。CSS 可以描述David Bowie 的《Space Oddity》,但我选择了更明显的选项。


我很喜欢这种风格和格式,我可能会继续画类似的漫画……但速度会慢下来。也许除了常规的CSS/Web开发漫画外,每周还会画一幅。

与此同时,如果您喜欢这些漫画,请访问comiCSS网站,并在TwitterLinkedIn上关注其账号以获取最新资讯。或者,您也可以在 Patreon 上成为支持者,为该项目提供支持。

文章来源:https://dev.to/alvaromontoro/css-cartoons-29bp
PREV
不要只是编写代码
NEXT
构建您自己的颜色对比度检查器