有大神知道这样的公众号排版黑科技是怎么实现的吗

[s1louw]

小白第一次发，工作上经常写推文，想玩点不一样的，类似这种：

https://mp.weixin.qq.com/s/TZOxpeSHMagNRCdKHlJ4_Q

能看出来是三张图，其中一张是透明的，我目前只学完了 HTML，想问如果要达到这种效果，我应该学 css 里面的哪些知识呢，多谢~

[ayase252]

线性渐变?linear-gradient

[iblessyou]

学完 HTML 那简单的 CSS 应该也知道些
用浏览器打开看代码 不懂的搜不就行了

[42V0CdLjCU494ogF]

svg 实现的

[qiayue]

svg

[s1louw]

@ayase252
每张图之间过度应该是用 ps 做的把，我觉得，

[s1louw]

@iblessyou
ok，我去试试，css 选择器和文本已经熟了

[7gugu]

svg，微信好像可以在图片上面覆盖一个 svg，有一些公众号，做那种滚动切换场景就是同一个原理

[rogwan]

可以看看网易王三三的公众号，类似玩法很多。最后总结是编辑这种互动网文体力撑不住，apple 这篇文章的制作，写篇这种文章成本太高，一般自媒体人吃不消

[s1louw]

@rogwan
感谢！确实很有意思的公众号，可以借鉴很多，确实时间成本要花费更多，但是我觉得或许能够找到固定的模式，可以一直套用

[saltedFish666]

那个是图片吧

[multiple1902]

将文本内容做成位图且不标注替代文本 (alternative text)。

这不是什么黑科技，而是将有视觉障碍的人拒之门外的技术滥用。

[s1louw]

@multiple1902 确实值得思考，现在公众号很多都采用长图拼接，上司也是要求我用 ps 排班推文

[lamada]

记得看看 mix-blend-mode 分分钟让你用上酷炫的效果，很好用哦

[by73]

大概看了下源码，是图片 + gif + mix-blend-mode，貌似没有找到 svg 的影子。中间的渐变则是直接用新图片代替（应该是图片与图片之间的渐变比较难用纯 css 做到）。上滑是靠 overflow + float: left 实现的。这里面涉及的 css 排版还是比较多的，建议开着开发者工具慢慢调试看直观效果，遇到哪里有问题就搜。而且推文对图片处理的要求比较多，因为只能靠 css，但 css 的图片处理能力不强，所以可能还需要去看一下图片相关的内容。当然只是建议，步子还是不要跨太大了 emm

跑个题，apple.com 前端感觉有很多奇奇怪怪的点子，比如 apple musice 的页面用过 sticky ； ipad pro 用过横向滚动（这个当时研究了一天，发现原理居然是搞一个正方形的页面，绑定垂直滚动事件让它直接控制水平，这解决方案真的强，直接搞定 smooth scroll ）。要是微信推文能用 js，apple 绝对能搞出花来。当然楼上所述的视觉障碍也是个问题，但考虑到这是一篇推文，而且微信自己也没有任何无障碍的东西。。唉。

[s1louw]

@lamada
嗯嗯，看了一下，类似 ps 的图层叠加，有时间研究一下

[s1louw]

@by73
因为我在工作中经常用到 i 排版和秀米这种公众号编辑器，虽然也可以套用模板实现一些效果，但用起来还是奇葩。只能自己研究，网上也没有前车之鉴，大概总结了一些公众号使用的技术也就是多图叠加滑动+svg 点击交互，图片处理和排版也是重点，ps 我还算熟练，就是前端技术上卡住了