Skip to content

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

Notifications You must be signed in to change notification settings

Yuezi32/flipClock

Repository files navigation

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》

2025年春季翻新版教程(原理不变,仅更新了React和Vue代码):

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

教程目录

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published