用代码画画!用 SVG 为你的应用设计独一无二的专属 Logo
我们平时看到的图片(比如照片、JPG、PNG)是由一个个微小的“像素点”拼成的。放大后会变得模糊、有锯齿。但是在网页开发中,我们更喜欢用 SVG (可缩放矢量图形)。
就像用十字绣绣出来的画。放得越大,越能看出一个个方块(马赛克)。
就像用数学公式算出来的画。无论放多大都绝对清晰!最重要的是,它是一段代码,可以随时修改颜色,甚至让它动起来!
观察下面的两个 AI 机器人 Logo,它们都是纯代码生成的。仔细看看下方那个加上了 CSS 动画代码 的 Logo 有什么神奇的变化?
干净利落,像一张高清贴纸
加入悬浮、眨眼和投影动画,瞬间注入灵魂!
在豆包中输入以下提示词。记得把括号里的内容换成你想要的元素:
1. 从豆包里复制那一长串以 <svg> 开头的代码。
2. 打开你上节课做的 .html 文件,把它粘贴在标题的上方!
从下面的“风格词典”中选择一种你最喜欢的调性,修改刚才的提示词,生成你独一无二的 Logo:
提示词:扁平化设计,几何图形拼接,类似苹果系统图标,使用高级灰和莫兰迪色系。
提示词:线条锋利,带有霓虹灯发光效果(使用 SVG 滤镜),亮紫色和青色搭配,未来科技感。
提示词:线条粗圆,色彩鲜艳马卡龙色系。角色要有一双大大的眼睛和可爱的表情。
完成静态 Logo 后,不要满足!带着你的代码去找豆包,告诉它:
“非常棒!现在请在这个 SVG 代码中加入 CSS 动画,让它能够 [一直缓慢上下浮动 / 不停地旋转 / 眼睛会眨],请给我完整的修改后代码。”