文章目录
自从不断优化全站的可视化风格后，文章页一直保持原有的风格。为了和全站风格统一，经过 1 天的思考和设计，终于对文章页重新设计了一下样式，这次设计真是改动了不少内容。
更改原有的 html 结构
- 将原有左右结构的封面图更改为沉浸式封面图
- 重新设计首次加载动画
根据 wordpress 自定义字段特性，加入以下字段：
- 心情
- 天气
- 浏览次数（重新计算）
- 未来还想加上状态，比如正在听
根据 wordpress 文章类型特性，设计适用不同文章类型样式，目前设计三种样式如下：
- 通用样式
- 分享音乐样式
- 一句话 / 状态样式
- 未来还想设计视频、图片、相册三种类型的样式
目前已知兼容性问题
- 在最新版的 chrome 和 edge 浏览没有问题
- 在 Firefox 上不支持 backdrop-filter 属性，背景虚化失效并已替代纯色背景
- 已放弃 qq 浏览器不支持 backdrop-filter 属性兼容
- 已放弃 IE 全系兼容
欢迎发现更多细节~
右上角图标尝试 css 新特性：mix-blend-mode: difference ，它可以自动根据背景更改显示颜色。例如在白色背景下，字体颜色会变黑，十分有趣。
总觉着拉条的时候有掉帧的感觉
坐等开源
页面美是美，但在我的浏览器上反应有点慢。
虽然布局很素雅，但是效果真的很惊艳。
@akilar应该是动画效果的作用~
截图中右上方，感觉有些问题！
@Teacher Du嗯，原来是父div宽度变化导致原有的位置计算错误。暂时改了下，那里未来还要重新思考下 😏
@风记星辰我喜欢现在的风格！
膜拜大佬~~
IE：习惯了
QQ浏览器：差不多习惯了
FireFox：终于也要去习惯了
感觉backdrop-filter用处挺多的为什么Firefox不去支持呢，很奇怪
@橙梓IE几乎没人用了，qq浏览器真的差劲。背景虚化那个需要大量渲染，据我了解 Firefox 为了运行流畅度就牺牲了这个支持，不过并非完全不支持，可以通过手动的方式在设置里面开启。
是大佬！
@风清wink.ink 现在随机刷新文字的风格令我眼前一亮
大佬 太强了