这是一个创建于 1850 天前的主题，其中的信息可能已经有所发展或是发生改变。
小白第一次发，工作上经常写推文，想玩点不一样的，类似这种：
https://mp.weixin.qq.com/s/TZOxpeSHMagNRCdKHlJ4_Q
能看出来是三张图，其中一张是透明的，我目前只学完了 HTML，想问如果要达到这种效果，我应该学 css 里面的哪些知识呢，多谢~
 |
1
ayase252 2019-10-21 09:33:08 +08:00 via iPhone  2
线性渐变?linear-gradient
|
 |
2
iblessyou 2019-10-21 09:34:26 +08:00 1
学完 HTML 那简单的 CSS 应该也知道些
用浏览器打开看代码 不懂的搜不就行了 |
 |
3
jwenwang 2019-10-21 09:34:31 +08:00 1
svg 实现的
|
 |
4
qiayue 2019-10-21 09:35:48 +08:00 1
svg
|
 |
7
7gugu 2019-10-21 10:05:53 +08:00 via Android 1
svg，微信好像可以在图片上面覆盖一个 svg，有一些公众号，做那种滚动切换场景就是同一个原理
|
 |
8
rogwan 2019-10-21 10:08:23 +08:00 via iPhone 1
可以看看网易王三三的公众号，类似玩法很多。最后总结是编辑这种互动网文体力撑不住，apple 这篇文章的制作，写篇这种文章成本太高，一般自媒体人吃不消
|
 |
9
s1louw OP @rogwan
感谢！确实很有意思的公众号，可以借鉴很多，确实时间成本要花费更多，但是我觉得或许能够找到固定的模式，可以一直套用 |
 |
10
saltedFish666 2019-10-21 10:36:59 +08:00
那个是图片吧
|
 |
11
multiple1902 2019-10-21 11:31:56 +08:00 1
将文本内容做成位图且不标注替代文本 (alternative text)。
这不是什么黑科技，而是将有视觉障碍的人拒之门外的技术滥用。 |
|
12
s1louw OP @multiple1902 确实值得思考，现在公众号很多都采用长图拼接，上司也是要求我用 ps 排班推文
|
 |
13
lamada 2019-10-21 12:45:24 +08:00
记得看看 mix-blend-mode 分分钟让你用上酷炫的效果，很好用哦
|
 |
14
by73 2019-10-21 12:49:43 +08:00 2
大概看了下源码，是图片 + gif + mix-blend-mode，貌似没有找到 svg 的影子。中间的渐变则是直接用新图片代替（应该是图片与图片之间的渐变比较难用纯 css 做到）。上滑是靠 overflow + float: left 实现的。这里面涉及的 css 排版还是比较多的，建议开着开发者工具慢慢调试看直观效果，遇到哪里有问题就搜。而且推文对图片处理的要求比较多，因为只能靠 css，但 css 的图片处理能力不强，所以可能还需要去看一下图片相关的内容。当然只是建议，步子还是不要跨太大了 emm
跑个题，apple.com 前端感觉有很多奇奇怪怪的点子，比如 apple musice 的页面用过 sticky ； ipad pro 用过横向滚动（这个当时研究了一天，发现原理居然是搞一个正方形的页面，绑定垂直滚动事件让它直接控制水平，这解决方案真的强，直接搞定 smooth scroll ）。要是微信推文能用 js，apple 绝对能搞出花来。当然楼上所述的视觉障碍也是个问题，但考虑到这是一篇推文，而且微信自己也没有任何无障碍的东西。。唉。 |
Select Language