跳到主要内容

诗词网站更新：v0.2.5

· 阅读需 2 分钟
Johnny
Johnny
一年五班小憨憨

今天我们发布了诗词网站的 v0.2.5 版本更新，主要改进了注释功能的视觉体验。

功能更新​

1. 整合注释系统​

  • 将 HoverPoem 组件的注释功能整合到 PinyinPoem 组件中
  • 保留了原有的拼音显示和简繁体切换功能
  • 优化了组件的代码结构

2. 注释样式优化​

  • 添加了5种下划线样式供选择：
    • 实线 (solid)
    • 点线 (dotted)
    • 短划线 (dashed)
    • 双线 (double)
    • 波浪线 (wavy)
  • 优化了下划线的视觉效果：
    • 线条粗细调整为 0.5px
    • 添加了淡蓝色效果
    • 与文字的间距设为 4px

3. 朝代信息显示​

  • 添加了诗人朝代信息
  • 默认隐藏，开启注释时才显示
  • 添加了优雅的淡入动画效果

技术细节​

CSS 优化​

.character.hasAnnotation[data-style="dashed"] {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: rgba(100, 149, 237, 0.5);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
}

动画效果​

.dynasty {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

下一步计划​

  1. 添加更多诗词作品
  2. 优化移动端显示效果
  3. 增加更多交互功能

反馈​

如果你在使用过程中发现任何问题，或者有任何建议，欢迎在 GitHub 上提交 issue 或者直接联系我们。

Johnny
2024年1月14日