秀米svg点击显示另一张图_秀米说:SVG和图文排版
公众号图文的交互性,也可以用滑动布局来做,比如这样:
光
阴
的
事
故
A Story of Time
滑动解锁回忆
1
1980-2020
一寸光阴一寸金,寸金难买寸光阴。
2
1980-2020
一寸光阴一寸金,寸金难买寸光阴。
3
1980-2020
一寸光阴一寸金,寸金难买寸光阴。
4
1980-2020
一寸光阴一寸金,寸金难买寸光阴。
5
1980-2020
一寸光阴一寸金,寸金难买寸光阴。
左右滑动布局交互效果
提拉鱼线,看看会钓到什么鱼?
哇,是鲸鱼
哇,是螃蟹
上下滑动布局交互效果
比较起来,动图GIF无法让用户参与互动,滑动效果又难较融合动画效果,那SVG效果刚好能做到这两方面:
这里有一个有趣的问题,前面我们提到了PPT效果,大家可能会想到,这不就是H5吗?的确,H5里面的互动效果、动画效果都非常丰富,那公众号图文能做到这个效果吗?
很遗憾,H5用到的CSS方案和SVG是不同的,这个方案在公众号图文里无法兼容,从技术与安全方面,公众号后台目前只支持SVG这种方式。
不过,SVG它在图形设计上还有更广泛的用途,公众号图文也有部分的支持,这个话题可以留到下期再说,或许有下期。
SVG效果是不是公众号排版的
大招和必杀技呢?
公众号排版是一个很大的课题,微信公众号平台在图文格式上,从一开始就保持了业界少有的开放性和自由度(即使到了今天也罕有其他内容平台能与之匹敌)。
所以,基本上可以认为公众号图文的底层逻辑是一张白纸,小编要怎么设计都行,从而使得公众号排版涉及文案、设计、配色、布局、创意、配图和互动等诸多方面。
小编可以用干净整洁的三段式设计,来表达核心文字内容,也可以用无缝图片拼接,做出整屏大图效果;企业、机关、校园、文艺、科技等等等,各行各业、不同风格,公众号图文排版都能很好的产出小编想要的效果。
左右滑动查看更多效果
上下滑动浏览作品全文
今天微信公众号的丰富生态,和公众号图文的开放性是密切相关的。
SVG也是微信图文开放性的一种表现,自从开发者发现微信图文支持svg后,陆陆续续出现了例如弹幕、快闪、歌词滚动、答题、点击显示、展开等等效果,行业内也有一批专门针对SVG代码提供深度定制的开发者,在不断探索各种新的SVG交互技术。
秀米则是尽量把复杂的代码,转换成易懂的模板和属性设置,方便用户使用,同时也让用户能在模板的基础上,发挥创意,进行二次创作。
一个基础的SVG布局,秀米的模板设计师可以在上面自行组合出大家看到的各个SVG模板。
请领走,今日份的开心
有新模板
按时下班
不催更
点赞过千
收到工资
头发不掉
不加班
10W+
秀米-点击显示-搜索“小瓶子”获取
修改文字内容就可以修改字幕
找到SVG布局设置动画
打开布局模式
弹弹弹弹弹弹弹弹幕啊
秀米-字幕效果-搜索“字幕”获取
了解如何做好防护措施
*请打开布局模式修改文字
秀米-字幕效果-搜索“字幕”获取
下述哪些是有害垃圾?
?
查看答案
废水银
温度计
罐头
盒子
秀米-点击答题-搜索“答题”获取
我的账单
xiumi
属性
数量
*可爱
20
*欢脱
12
*霸道
23
*一本正经
16
*羞涩
17
*体贴
22
*完美主义
31
合计
null
你太强了 (tql)
秀米-展开效果-搜索“凭条”获取
滑动查看秀米SVG布局模板案例
所以,从这个角度也可以说明秀米在图文排版的开放性,是非常之高的。
微信图文是非常开放兼容的,秀米排版也是高度灵活的,需不需要用SVG其实要看你今天做的推文,需不需要“互动”和“动画这两个SVG的核心特性,无需为了SVG而SVG。用了SVG,可以给图文增添趣味和亮点;不用SVG,依然可以好好研究图文的配色、版式,做出很棒的效果。
秀米想告诉大家的是,没有哪项单独的技术可以成为涨粉的银弹(Silver Bullet),即便公众号排版已是如此大的课题,它本身也只是公众号运营的一小部分,要成为拥有国家正规职称的“公众号博主”,果然是一件任重道远的事情啊!
好了,今天就聊了聊SVG效果的核心特性,公众号图文格式的自由度,欢迎大家在留言区讨论。
一个思考题:
还有没有人记得秀米的折叠布局和点击弹出布局呢?
请用一句话证明
你是秀米老用户
秀米svg点击显示另一张图_秀米说:SVG和图文排版相关推荐
- 秀米svg点击显示另一张图_公众号排版怎么做?点击图片出现另一张图片是怎么弄的?...
怎么在公众号后台排版 过去小编使用第三方编辑器,同步或复制排版好的文章到公众号后台时,总能遇到格式错乱,或者样式复制不过来的问题,不仅操作流程繁琐,还需要花时间去调整文章排版,令人头疼. 后来,小编在 ...
- 秀米svg点击显示另一张图_这个svg也太好玩了吧,居然可以自动展开全文!
原标题:这个svg也太好玩了吧,居然可以自动展开全文! 胖友们大家好呀,我是三儿 三儿发现,胖友们都比较喜欢自动变换和展开样式的svg.自动变换能够省掉点击步骤,展开svg可以将 隐藏的内容展开,两个 ...
- matlab两个曲线的名称怎么显示出来的,求MATLAB的高手,怎么把两张仿真曲线合并显示在一张图上?...
求MATLAB的高手,怎么把两张仿真曲线合并显示在一张图上? 关注:194 答案:5 手机版 解决时间 2021-02-10 14:48 提问者终究是陌生了 2021-02-09 16:38 程序 ...
- 使用Python中的matplotlib将多个图片显示到一张图内
在我们写论文或是汇报时,经常需要整合所得到的可视化数据结果,插入我们的论文中.如下所示的情况,我们需要将四个相关的弹性模量预测结果在一张图里展示. 使用matplotlib库中的子图(subplot) ...
- html超链接显示另一张图,怎么把一个超链接弄到图片上,他人点击图片就会出现另一个网页....
html xmlns=http://www.w3.org/1999/xhtml head title第一个html页面/title script type=text/javascript langua ...
- 张近东现身国米看台 苏宁入资国米目标不只20%股份?
4月25日消息,据意大利媒体报道,苏宁集团董事长张近东现身米兰,会见国米高层并出现在梅阿查看台,入资国米或是此行目的. 张近东现身国米看台苏宁目标不只20%股份 据报道,在北京时间昨日凌晨意甲联赛中, ...
- 如何使用Tensorboard一张图显示多条曲线
在深度学习训练模型的时候,用Tensorboard中画图有时候想要在一张图中同时画出训练集的准确率曲线和验证集的准确率曲线. 我通过多次实验,碰了不少坑,在这里做个小小的总结. 注意:以下代码适用于T ...
- 秀米图文排版UEditor插件示例 新增自定义按钮没有显示 以及与neditor的适配
这是秀米插件的官方文档示例链接 因为业务需求,我们后端的CMS里的富文本编辑器需要使用秀米插件,因为我们使用的是vue,便使用了neditor(这是用vue对ueditor的一个封装). 我们先来解释 ...
- 秀米的对话框格子可以变大吗_秀米怎么制作微信滑动照片呢?方法/步骤
秀米怎么制作微信滑动照片呢?方法/步骤 很在微信里面发布图文信息往往涉及排版编辑,而微信文章编辑利器一定就是秀米了,秀米怎么制作滑动照片呢?这个技巧可能掌握的人并不多,一起来看看教程吧! 方法/步骤 ...
最新文章
- JWT的使用及登录账号
- 分类模型评估体系:混淆矩阵、PR曲线、F1、Weighted F1、Micro F1、Macro F1、ROCAUC、KS曲线、Lift曲线、GAIN曲线
- ubuntu下远程控制LinuxWindow桌面
- ng-content的一个实际例子
- Oracle Study之--Oracle 11gR2通过RMAN克隆数据库
- kolla-ansible-----常用命令
- 中国制造2025变革,背后的大数据来龙去脉
- 小微企业——信用风险与放款原则分析
- SpringBoot RestFul风格API接口开发
- 深度学习基础 | 从Language Model到RNN
- java服务端高并发问题_Java服务端两个常见的并发错误
- Spring之后处理器
- 5.分布式服务架构:原理、设计与实战 --- 基于调用链的服务治理系统的设计与实现
- html制作公众号,自制微信公众号一键排版工具
- H5禁止苹果手机页面缩放
- 微信接口第三方php原理,微信第三方登录原理
- UVA 1637 - Double Patience(概率DP)
- java excel cell 设置样式_java中对Excel的创建、样式修改
- 学习笔记:python游戏脚本1.0版本,实现自动点击、识图、识别价格、弹窗提示低于预期价格可以购买
- 易语言之ocr自动识别验证码dll文件
热门文章
- 不用插件,如何将tif格式的影像精准导入到CAD中?
- IMSI和TMSI的区别
- 计算机装系统找不到硬盘,重装win10系统找不到硬盘完美解决方法
- C语言输入三边求三角形面积
- 跑步听歌用哪种耳机更合适、推荐几款听歌跑步的耳机
- 深度学习英文缩写_深度学习相关专业词汇简称汇总
- maven_使用Maven Failsafe和JUnit @Category将集成测试与单元测试分开
- MySQL 8.0的预研清单和计划
- 信息学奥赛一本通(c++):2066:【例2.3】买图书
- 重学TCP协议(8) TCP的11种状态