{"title":"Apple 微信公众号排版效果","content":"\n近期到处都可以看到这个被刷屏的微信公众号案例。\n\nhttps://mp.weixin.qq.com/s/ZYfIqwPNbHVepSyJsLFk-w\n\n我们就来聊一聊怎么实现的,说起来也不复杂,主要就是利用 SVG 的动画效果 + 创意达到了这么酷炫的效果。\n\n涉及到也只有两个动画元素 `opacity` 和 `height` 的变化。\n\n微信图文内容本质上也是一段 HTML 代码,先看一个 demo\n\n这是一篇正常的图片,只不过是全图片排版的。\n\n\n\n\n\n```html\n\n\n \n \n \n SVG Demo1\n \n \n \n
\n
\n \"\"\n
\n\n
\n
\n \"\"\n
\n
\n \"\"\n
\n
\n \n\n```\n\n调整为后的:\n\n```html\n…\n
\n\t
\n\t\t
\n\t\t\t…\n\t\t
\n\t\t\t…\n\t
\n\t
\n\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t
\n
\n```\n\n但是会碰到一个问题,就是不同屏幕下的高度是不一样的,那么我们就需要确保高度一致,利用 `padding` 可以完成这个小调整,如下\n\n```html\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n```\n\n#### 总结的两个关键点:\n\n1. 图片外层 box(img-content) 增加 `height:0` 属性,但是没有添加 `overflow:hidden` 这点很关键,这影响到 box 里面的内容超过了高度是否能够正常展示。\n2. 最外层 box(content) 的高度完全由 `svg` 的高度来支撑,结合第一点的话也就达到了我们的目的,控制 `svg` 的高度,来展示所需要的内容。\n\n关于 SVG 的动画,后面另外起文另说。\n\n点击这里查看:[SVG 高度扩展示例][1]\n\n\n [1]: https://assets.fun2ex.com/usr/uploads/2020/03/1928054692.html","date_published":"2023-07-20T05:07:18.926Z","summary":"","tags":["post","guide","iOS","wechat","tech"],"sources":["xlog"],"attributes":[{"trait_type":"xlog_slug","value":"apple-ipad-for-wechat-article"}],"attachments":[],"type":"note"}