自从不断优化全站的可视化风格后,文章页一直保持原有的风格。为了和全站风格统一,经过 1 天的思考和设计,终于对文章页重新设计了一下样式,这次设计真是改动了不少内容。

更改原有的 html 结构

  • 将原有左右结构的封面图更改为沉浸式封面图
  • 重新设计首次加载动画

根据 wordpress 自定义字段特性,加入以下字段:

  • 心情
  • 天气
  • 浏览次数(重新计算)
  • 未来还想加上状态,比如正在听

根据 wordpress 文章类型特性,设计适用不同文章类型样式,目前设计三种样式如下:

目前已知兼容性问题

  • 在最新版的 chrome 和 edge 浏览没有问题
  • 在 Firefox 上不支持 backdrop-filter 属性,背景虚化失效并已替代纯色背景
  • 已放弃 qq 浏览器不支持 backdrop-filter 属性兼容
  • 已放弃 IE 全系兼容

欢迎发现更多细节~

右上角图标尝试 css 新特性:mix-blend-mode: difference ,它可以自动根据背景更改显示颜色。例如在白色背景下,字体颜色会变黑,十分有趣。