不知道你是不是也有這種困惑？其實三兒剛開始接觸svg時，也是如此，使用同樣的svg組件，但制作出來的效果卻截然不同。

三兒曾向同事尋求幫助，他們說：那是因為你看得還不夠多，做得還不夠多，看得多了，做得多了一切都會水到渠成。

三兒為你準(zhǔn)備了一些svg案例，希望看后你能有新收獲，新體會。

??查看原文

#一把精美的銅鎖，吸引用戶想要探究“鎖”背后的密碼，高亮閃爍的“密碼”，降低交互門檻，完成密碼輸入，“銅鎖”解開，展開的是另一段佳話，完美契合七夕主題，優(yōu)雅且優(yōu)美，讓人難忘。

??查看原文

#展開前是問題，展開后是回答，問題一目了然，回答清晰可見，點擊回收，不會顯得內(nèi)容冗長，給予用戶良好的閱讀體驗。

??查看原文

#gif圖總是能在第一眼就吸引讀者，增加文章動感，試問：一個包裝精美的禮物盒，有誰不想要拆開看看里面“藏”著什么樣的寶貝嗎？合理利用人的好奇心，能夠驅(qū)動用戶繼續(xù)閱讀。

??查看原文

#點擊展開是很基礎(chǔ)的svg組件，但如何通過“文案”引導(dǎo)，內(nèi)容搭配是一個相當(dāng)考驗創(chuàng)作者的水平，看似簡單的效果，運用得當(dāng)也能取得不錯的效果，下面我們還將再看一個【點擊展開】案例。

??查看原文

#同樣是【點擊展開】，但兩個案例呈現(xiàn)的風(fēng)格是迥然不同的，組件效果雖是相同的，但文案、美工處理都完美地展現(xiàn)了自己想要表達的內(nèi)容，這就是成功的。

#以上所有效果，均可在135svg編輯器內(nèi)直接搜索組件名稱或組件ID使用。

#很多效果無法在pc端直接瀏覽，想要預(yù)覽svg整體效果，最好是【保存同步】至微信后臺，發(fā)送預(yù)覽鏈接到手機上預(yù)覽。