2021 年 9 月 12 日,博客终于启用一款依靠纯代码实现的标识,作为头部展示使用。
由于代码兼容问题,IE10 以下版本不支持,当然了谁还会使用 IE 呢?


设计说明

框架
  • 比例 — 10 : 7
  • 双圆切割比例 — 1 : 10
  • 大小安全数值 — 双圆高度最低不小于 25px
  • 上下安全距离 — 双圆高度 × 30%
动画(平面非动态格式无动画)

背景动画

  • 介质 — 透明色彩
  • 角度 — 135 度
  • 轨迹 — 循环渐进
  • 速度 — 4.5 秒

运动动画

  • 角度 — 平移
  • 轨迹 — 有规则运动
  • 速度 — 9 秒
颜色使用(透明颜色会随背景发生些许变化)
  • rgba(238 77 80 / 70%)
    采用本站主题色 ee4d50 透明度 70%的红
  • rgba(255 105 0 / 30%)
    采用本站辅助色 ff6900 透明度 30%的黄

寓意含义

图形及颜色
  • 左圆形
    意为来到这里的人
    颜色上采用透明度 30%主题色,意为 3 分感受
  • 右圆形
    意为我
    颜色上采用透明度 70%辅助色,意为 7 分感恩
形状
  • 交错纵横
    依袁宏《三国名臣序赞》中“海纳百川”,取海纳之意。一切皆万象更新,而不变的是包容和互补
  • 各缺一方
    依苏轼《水调歌头·明月几时有》中“人有悲欢离合,月有阴晴圆缺” ,来以月喻人。虽“古难全”,但将人间世俗尽收圆形。相互融合之中,尝遍这人生百般滋味
动画
  • 相互辉映
    山野万里中我们或许是藏在微风中的欢喜,互相吸引与照耀
  • 循环渐进
    在你来我往的市井长巷中,聚拢来是烟火,摊开来是人间
  • 两个圆就像双方,无论是朋友还是家人甚至是恋人都会存在生活中重叠的部分,这就像是你中有我我中有你。无论这种纠缠的状态会持续多久,但总是有那么一天双方会分开,而分开后则是再一次相遇,第二次相遇的两个圆持续缓慢靠近,而重叠的部分也越来越多。最后回到最初始的状态,也表示那一刻回到了初心。

衍生版本和更多类型的通稿

标准稿 - 彩色
标准稿 - 反白稿
标准稿 - 墨稿
线稿 - 彩色
线稿 - 反白稿

线稿 - 墨稿