不知道你是不是也有这种困惑？其实三儿刚开始接触svg时，也是如此，使用同样的svg组件，但制作出来的效果却截然不同。

三儿曾向同事寻求帮助，他们说：那是因为你看得还不够多，做得还不够多，看得多了，做得多了一切都会水到渠成。

三儿为你准备了一些svg案例，希望看后你能有新收获，新体会。

👉查看原文

#一把精美的铜锁，吸引用户想要探究“锁”背后的密码，高亮闪烁的“密码”，降低交互门槛，完成密码输入，“铜锁”解开，展开的是另一段佳话，完美契合七夕主题，优雅且优美，让人难忘。

👉查看原文

#展开前是问题，展开后是回答，问题一目了然，回答清晰可见，点击回收，不会显得内容冗长，给予用户良好的阅读体验。

👉查看原文

#gif图总是能在第一眼就吸引读者，增加文章动感，试问：一个包装精美的礼物盒，有谁不想要拆开看看里面“藏”着什么样的宝贝吗？合理利用人的好奇心，能够驱动用户继续阅读。

👉查看原文

#点击展开是很基础的svg组件，但如何通过“文案”引导，内容搭配是一个相当考验创作者的水平，看似简单的效果，运用得当也能取得不错的效果，下面我们还将再看一个【点击展开】案例。

👉查看原文

#同样是【点击展开】，但两个案例呈现的风格是迥然不同的，组件效果虽是相同的，但文案、美工处理都完美地展现了自己想要表达的内容，这就是成功的。

#以上所有效果，均可在135svg编辑器内直接搜索组件名称或组件ID使用。

#很多效果无法在pc端直接浏览，想要预览svg整体效果，最好是【保存同步】至微信后台，发送预览链接到手机上预览。