翻转时钟动画实现

1. 背景

今天遇到一个特殊的需求， 就是需要实现类似于翻转式的时钟动画，他的效果大概是这样子的。

首先老惯例，先到网上找找有没有插件 😁😁😁😁，找了一圈后发现没有能满足定制化需求的插件。只能自己开干了。

vue3 实现掘金博客文章页

1.开始

1.安装必要插件

pnpm install prismjs marked vite-plugin-prismjs front-matter @types/marked @types/prismjs

• prismjs:

  • 是一个轻量级、可扩展的语法代码高亮插件
  • 官网：棱镜 (prismjs.com)

• marked:

  • 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的 Markdown 文本而不必担心结果会出乎意料或者花费很长时间
  • 官网：标记的文档 (marked.js.org)

• vite-plugin-prismjs:

  • 快速使用 prismjs 的 vite 插件
  • https://www.npmjs.com/package/vite-plugin-prismjs

• front-matter：

  • 用于解析 front-matter 的插件
  • https://www.npmjs.com/package/front-matter

• @types/prismjs:prismjs 的 typeScirpt 类型支持

• @types/marked:marked 的 typeScript 类型支持

  2.配置 vite.config.js