大牌同款SVG組件推薦 - 135編輯器零代碼趣味排版教程
135編輯器SVG組件更新：地圖游走探索、產品細節點擊放大、逆向滑動等交互效果解析，適配青年用戶及品牌推文場景。提供組件ID及使用技巧，零代碼實現大牌同款動態排版，解決用戶組件選擇與場景應用難題，提升推文趣味性與互動性。含GUCCI等案例演示，幫助快速掌握效果落地方法。
最近有不少朋友反饋，每每進到SVG編輯器看到琳瑯滿目效果組件，有些「不知所措」不知道在什么場景下可以使用什么樣的組件，同時不少朋友平日里只用自己熟悉的效果，有很多效果未曾探索。三兒覺得有些可惜，于是想要給大家展示我們近期上新不錯的效果同時搭配大牌案例，讓大家對組件效果有一個更直觀的感受，那么就進入我們今天SVG組件推薦第一期吧。
這篇是由135平臺帶來的春日地圖游走，利用公園場景，用戶手動滑動地圖探索預設點位，點擊后彈出圖片，展示更豐富的信息內容。該SVG組件與用戶交互性強，需要讀者能夠滑動探索，所以更適合用戶畫像為青年人的賬號，探索、接受能力更強，面對年紀偏大的用戶更適宜交互簡單或無交互的排版方式。
多區域無限點擊彈出/點擊收回（底層自由滑動）
組件ID：970
需要在SVG編輯器中搜索使用
*注意點擊區域不要和返回觸發區重疊，同時建議大家完成該效果制作后選擇右上角「導出」「復制代碼到135編輯器」中，給全文設置一個地圖同色背景，這樣用戶在滑動時不會有白底露出。
如何展示產品細節？GUCCI給了我們一個不錯的答案，利用點擊放大效果，巧妙展示商品細節，同時再次點擊回到原尺寸，達到細節與整體兩手抓，該效果不僅適合商品展示，對于需要細節放大的地方都能勝任如動植物某一特征、產品某處詳情等。
點擊放大點擊恢復圖片（自定義放大區）
組件ID：972
需要在SVG編輯器中搜索使用
*注意點擊區域不宜太小，這樣會使圖片放得過大導致圖片不清晰。
當我們習慣了使用向上滑動，不如換個視角選擇逆向滑動，至本就給大家換了換口味，逆向上滑來點不一樣的，會有讓人眼前一亮的感覺。
豎向逆向滑動
組件ID：971
需要在SVG編輯器中搜索使用
*該效果建議偶爾使用。
以上就是三兒
想要給大家推薦的SVG組件
所有組件均在SVG編輯器使用
http://www.a98138.com/svgeditor/
大家覺得還不錯的話
記得給三兒一個小心心
大家還有什么想看想學的
記得在評論區留言噢
立即登錄
