# flipclock

**Repository Path**: topper/flipclock

## Basic Information

- **Project Name**: flipclock
- **Description**: 2025新春版：干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-05-21
- **Last Updated**: 2025-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 2025新春版：干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

翻牌效果时钟的演示，包含原生JavaScript、Vue、React三种实现方式。

包含 5 套代码：

1. 原生Javascript
2. React18/19 (javascript)
3. React18/19 (typescript)
4. Vue3 (javascript)
5. Vue3 (typescript)

## 教程原文

📚📚 本项目有详细的讲解教程，原文请关注我的微信公众号【卧梅又闻花】📚📚

初版教程（原理讲解看这个教程）：

[《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React》](https://mp.weixin.qq.com/s/cdQQrK-xG00MmxPawUzeew)

2025年春季翻新版教程（原理不变，仅更新了React和Vue代码）：

[《2025新春版：干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React》](https://mp.weixin.qq.com/s/0tgaR6LzainyFsJlkHyK9w)

## 教程目录

```
1 翻牌的构建
• 1.1 基本结构
• 1.2 构建纸牌并用伪元素拆分上下两部分
• 知识点1：伪元素的使用
• 1.3 为纸牌添加文字
• 知识点2：line-height: 0的妙用
• 1.4 设置纸牌的层叠关系
• 知识点3：transform-origin和perspective
2 翻牌动画的实现
• 2.1 CSS3翻牌动画
• 知识点4：backface-visibility
• 2.2 JS实现翻牌交互
3 翻牌时钟的实现
• 3.1 HTML构建
• 3.2 构建Flipper类
• 3.3 实现时钟业务逻辑
• 知识点5：时间格式化函数的实现
• 3.4 运行时钟
4 Vue & React封装
• 项目Git源码
```

![image](https://wx3.sinaimg.cn/large/475dd357ly1gbh774dw0dj210n0ku443.jpg)