time-runner 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +101 -73
  2. package/README.zh-CN.md +184 -0
  3. package/dist/TimeRunner.d.ts +2 -1
  4. package/dist/Tools.d.ts +12 -0
  5. package/dist/index.css +1 -1
  6. package/dist/time-runner.es.js +339 -268
  7. package/dist/time-runner.umd.js +26 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,99 +1,119 @@
1
- # 时间/计时/倒计时组件
1
+ English | [中文](./README.zh-CN.md)
2
2
 
3
- ![时间/计时/倒计时组件](https://showscene.oss-cn-shanghai.aliyuncs.com/time-countdown.gif)
3
+ # Time / Timer / Countdown Component
4
4
 
5
- 地址：[功能演示-demo](http://showscene.cn/react-demo/clock)
5
+ ![Time/Timer/Countdown Component](https://showscene.oss-cn-shanghai.aliyuncs.com/time-countdown.gif)
6
6
 
7
- 这是一个展示时间、计时、倒计时的组件。
8
- 基于 React 开发。 主要功能包括：
9
- - 展示当前时间
10
- - 展示显示计时（电脑锁屏、笔记本盒盖不中断计时）
11
- - 展示倒计时
12
- - 些许动画效果
7
+ Demo：[Live Demo](http://showscene.cn/react-demo/clock)
13
8
 
9
+ This is a component used to display current time, timer, and countdown.
14
10
 
15
- ## 安装
11
+ It is built with React and provides the following features：
12
+ - Display the current time
13
+ - Display a timer (continues counting even if the computer is locked or the laptop lid is closed)
14
+ - Display a countdown timer
15
+ - Includes several animation effects
16
+
17
+
18
+ ## Installation
16
19
  ```bash
17
20
  npm i time-runner
18
21
  ```
19
- 或者
22
+ or
20
23
  ```bash
21
24
  yarn add time-runner
22
25
  ```
23
26
 
24
- ## 页面引入
27
+ ## Import
25
28
  ```jsx
26
29
  import { TimeRunner } from "time-runner";
27
- // 1.0.3 版本开始，不需要引入css文件了
30
+ // Starting from version 1.0.3, CSS import is no longer required
28
31
  // import "time-runner/dist/time-runner.css";
29
32
  ```
30
33
 
31
- ## 使用说明
34
+ ## Usage
32
35
  ```jsx
33
36
 
34
- // 当前时间
37
+ // Current time
35
38
  <TimeRunner />
36
- // 计时器
39
+ // Timer
37
40
  <TimeRunner showType="count" />
38
- // 倒计时
39
- <TimeRunner showType="2025-10-31" />
41
+ // Countdown
42
+ <TimeRunner showType="2026-10-31" />
40
43
 
41
- // 当前时间 + 翻牌效果
44
+ // Current time + flip card
42
45
  <TimeRunner mode="card" />
43
- // 计时器 + 翻牌效果
46
+ // Timer + flip card
44
47
  <TimeRunner mode="card" showType="count" />
45
- // 倒计时 + 翻牌效果
46
- <TimeRunner mode="card" showType="2025-10-31" />
48
+ // Countdown + flip card
49
+ <TimeRunner mode="card" showType="2026-10-31" />
47
50
 
48
- // 当前时间 + 翻转（左右）
51
+ // Current time + horizontal flip
49
52
  <TimeRunner mode="cube-h" />
50
- // 计时器 + 翻转（左右）
53
+ // Timer + horizontal flip
51
54
  <TimeRunner mode="cube-h" showType="count" />
52
- // 倒计时 + 翻转（左右）
53
- <TimeRunner mode="cube-h" showType="2025-10-31" />
55
+ // Countdown + horizontal flip
56
+ <TimeRunner mode="cube-h" showType="2026-10-31" />
54
57
 
55
- // 当前时间 + 翻转（上下）
58
+ // Current time + vertical flip
56
59
  <TimeRunner mode="cube-v" />
57
- // 计时器 + 翻转（上下）
60
+ // Timer + vertical flip
58
61
  <TimeRunner mode="cube-v" showType="count" />
59
- // 倒计时 + 翻转（上下）
60
- <TimeRunner mode="cube-v" showType="2025-10-31" />
62
+ // Countdown + vertical flip
63
+ <TimeRunner mode="cube-v" showType="2026-10-31" />
64
+
65
+ // Current time + drift
66
+ <TimeRunner mode="drift" />
67
+ // Timer + drift
68
+ <TimeRunner mode="drift" showType="count" />
69
+ // Countdown + drift
70
+ <TimeRunner mode="drift" showType="2026-10-31" />
71
+
72
+ // Current time + cut
73
+ <TimeRunner mode="cut" />
74
+ // Timer + cut
75
+ <TimeRunner mode="cut" showType="count" />
76
+ // Countdown + drift
77
+ <TimeRunner mode="cut" showType="2026-10-31" />
61
78
 
62
79
 
63
80
  ```
64
81
 
65
- ### 组件属性（props）
82
+ ### Component Props
66
83
  ```jsx
67
- /**
68
- * 显示模式，默认：default
69
- * default: 当前时间
70
- * count: 计时器
71
- * 指定时间：倒计时。
84
+ /**
85
+ * Display type (default: current time)
86
+ *
87
+ * default: show current time
88
+ * count: timer
89
+ * specific time: countdown
72
90
  */
73
91
  showType?: string;
74
- /**
75
- * 动画模式，
76
- * card：卡片
77
- * cube-v：上下翻转
78
- * cube-h：左右翻转
79
- * drift：漂浮
92
+ /**
93
+ * Animation mode
94
+ *
95
+ * card: flip card
96
+ * cube-v: vertical flip
97
+ * cube-h: horizontal flip
98
+ * drift: floating
99
+ * cut: cut
80
100
  */
81
101
  mode?: TransMode;
82
- /** 倒计时结束后执行的方法 */
102
+ /** Callback function executed when countdown finishes */
83
103
  finishCountFn?: Function;
84
- /** 尺寸，默认40 */
104
+ /** Component size (default: 40) */
85
105
  size?: number;
86
- /** 自定义样式类名 */
106
+ /** Custom class name */
87
107
  className?: string;
88
- /** 背景颜色 */
108
+ /** Background color */
89
109
  bgColor?: string;
90
- /** 边框颜色 */
110
+ /** Border color */
91
111
  borderColor?: string;
92
- /** 文字阴影颜色值 */
112
+ /** Text shadow color */
93
113
  textShadowColor?: string;
94
114
  ```
95
115
 
96
- ### 倒计时传入日期的格式
116
+ ### Countdown Date Format
97
117
  ```
98
118
  "YYYY-MM-DD",
99
119
  "YYYY/MM/DD",
@@ -103,56 +123,64 @@ textShadowColor?: string;
103
123
  "YYYY/MM/DD HH:mm:ss",
104
124
  ```
105
125
 
106
- ### React版本
126
+ ### React Version
107
127
  ```
108
128
  "react": ">=16.8.0",
109
129
  "react-dom": ">=16.8.0"
110
130
  ```
111
131
 
112
132
 
113
- # 更新日志
133
+ # Changelog
134
+
135
+ ## [1.1.5] - 2026-05-24
136
+ ### Changes
137
+ - Added mode = "cut" animation
138
+
139
+ ## [1.1.4] - 2026-03-07
140
+ ### Changes
141
+ - Added English README
114
142
 
115
143
  ## [1.1.3] - 2026-02-26
116
- ### 更新内容
117
- - 修复数字字体没有生效的问题
144
+ ### Changes
145
+ - Fixed an issue where the numeric font was not applied correctly
118
146
 
119
147
  ## [1.1.2] - 2026-02-25
120
- ### 更新内容
121
- - 更改字体和引用路径
148
+ ### Changes
149
+ - Updated font and reference paths
122
150
 
123
151
  ## [1.1.1] - 2026-02-24
124
- ### 更新内容
125
- - 修复数字字体引用路径的问题
152
+ ### Changes
153
+ - Fixed the numeric font reference path issue
126
154
 
127
155
  ## [1.1.0] - 2026-02-20
128
- ### 更新内容
129
- - 增加数字字体
156
+ ### Changes
157
+ - Added numeric font
130
158
 
131
159
  ## [1.0.5] - 2025-11-16
132
- ### 更新内容
133
- - 更新Readme内容
160
+ ### Changes
161
+ - Updated README content
134
162
 
135
163
  ## [1.0.4] - 2025-11-16
136
- ### 更新内容
137
- - 更新Readme内容
164
+ ### Changes
165
+ - Updated README content
138
166
 
139
167
  ## [1.0.3] - 2025-11-16
140
- ### 更新内容【Breaking Change】
141
- - 移除 “time-runner/dist/time-runner.css”文件引入
142
- - 增加 textShadowColor（文字阴影颜色）属性
143
- - 更新Readme内容，增加功能演示地址。
168
+ ### Changes【Breaking Change】
169
+ - Removed the time-runner/dist/time-runner.css import
170
+ - Added textShadowColor prop
171
+ - Updated README and added demo link
144
172
 
145
173
 
146
174
  ## [1.0.2] - 2025-10-11
147
- ### 更新内容
148
- - 增加 mode = "drift" 效果
149
- - 更新Readme内容
175
+ ### Changes
176
+ - Added mode = "drift" animation
177
+ - Updated README content
150
178
 
151
179
 
152
180
  ## [1.0.1] - 2025-10-07
153
- ### 更新内容
154
- - 更新readme内容
181
+ ### Changes
182
+ - Updated README content
155
183
 
156
184
 
157
185
  ## [1.0.0] - 2025-10-07
158
- ### 首次发布
186
+ ### Initial release
package/README.zh-CN.md ADDED
@@ -0,0 +1,184 @@
1
+ [English](./README.md) | 中文
2
+
3
+ # 时间/计时/倒计时组件
4
+
5
+ ![时间/计时/倒计时组件](https://showscene.oss-cn-shanghai.aliyuncs.com/time-countdown.gif)
6
+
7
+ 地址：[功能演示-demo](http://showscene.cn/react-demo/clock)
8
+
9
+
10
+ 这是一个展示时间、计时、倒计时的组件。
11
+ 基于 React 开发。 主要功能包括：
12
+ - 展示当前时间
13
+ - 展示显示计时（电脑锁屏、笔记本盒盖不中断计时）
14
+ - 展示倒计时
15
+ - 些许动画效果
16
+
17
+
18
+ ## 安装
19
+ ```bash
20
+ npm i time-runner
21
+ ```
22
+ 或者
23
+ ```bash
24
+ yarn add time-runner
25
+ ```
26
+
27
+ ## 页面引入
28
+ ```jsx
29
+ import { TimeRunner } from "time-runner";
30
+ // 1.0.3 版本开始，不需要引入css文件了
31
+ // import "time-runner/dist/time-runner.css";
32
+ ```
33
+
34
+ ## 使用说明
35
+ ```jsx
36
+
37
+ // 当前时间
38
+ <TimeRunner />
39
+ // 计时器
40
+ <TimeRunner showType="count" />
41
+ // 倒计时
42
+ <TimeRunner showType="2026-10-31" />
43
+
44
+ // 当前时间 + 翻牌效果
45
+ <TimeRunner mode="card" />
46
+ // 计时器 + 翻牌效果
47
+ <TimeRunner mode="card" showType="count" />
48
+ // 倒计时 + 翻牌效果
49
+ <TimeRunner mode="card" showType="2026-10-31" />
50
+
51
+ // 当前时间 + 翻转（左右）
52
+ <TimeRunner mode="cube-h" />
53
+ // 计时器 + 翻转（左右）
54
+ <TimeRunner mode="cube-h" showType="count" />
55
+ // 倒计时 + 翻转（左右）
56
+ <TimeRunner mode="cube-h" showType="2026-10-31" />
57
+
58
+ // 当前时间 + 翻转（上下）
59
+ <TimeRunner mode="cube-v" />
60
+ // 计时器 + 翻转（上下）
61
+ <TimeRunner mode="cube-v" showType="count" />
62
+ // 倒计时 + 翻转（上下）
63
+ <TimeRunner mode="cube-v" showType="2026-10-31" />
64
+
65
+ // 当前时间 + 漂浮
66
+ <TimeRunner mode="drift" />
67
+ // 计时器 + 漂浮
68
+ <TimeRunner mode="drift" showType="count" />
69
+ // 倒计时 + 漂浮
70
+ <TimeRunner mode="drift" showType="2026-10-31" />
71
+
72
+ // 当前时间 + 切割
73
+ <TimeRunner mode="cut" />
74
+ // 计时器 + 切割
75
+ <TimeRunner mode="cut" showType="count" />
76
+ // 倒计时 + 切割
77
+ <TimeRunner mode="cut" showType="2026-10-31" />
78
+
79
+
80
+ ```
81
+
82
+ ### 组件属性（props）
83
+ ```jsx
84
+ /**
85
+ * 显示模式，默认：default
86
+ * default: 当前时间
87
+ * count: 计时器
88
+ * 指定时间：倒计时。
89
+ */
90
+ showType?: string;
91
+ /**
92
+ * 动画模式，
93
+ * card： 卡片
94
+ * cube-v：上下翻转
95
+ * cube-h：左右翻转
96
+ * drift： 漂浮
97
+ * cut： 切割
98
+ */
99
+ mode?: TransMode;
100
+ /** 倒计时结束后执行的方法 */
101
+ finishCountFn?: Function;
102
+ /** 尺寸，默认40 */
103
+ size?: number;
104
+ /** 自定义样式类名 */
105
+ className?: string;
106
+ /** 背景颜色 */
107
+ bgColor?: string;
108
+ /** 边框颜色 */
109
+ borderColor?: string;
110
+ /** 文字阴影颜色值 */
111
+ textShadowColor?: string;
112
+ ```
113
+
114
+ ### 倒计时传入日期的格式
115
+ ```
116
+ "YYYY-MM-DD",
117
+ "YYYY/MM/DD",
118
+ "YYYY-MM-DD HH:mm",
119
+ "YYYY/MM/DD HH:mm",
120
+ "YYYY-MM-DD HH:mm:ss",
121
+ "YYYY/MM/DD HH:mm:ss",
122
+ ```
123
+
124
+ ### React版本
125
+ ```
126
+ "react": ">=16.8.0",
127
+ "react-dom": ">=16.8.0"
128
+ ```
129
+
130
+
131
+ # 更新日志
132
+
133
+ ## [1.1.5] - 2026-05-24
134
+ ### 更新内容
135
+ - 增加 mode = "cut" 效果
136
+
137
+ ## [1.1.4] - 2026-03-07
138
+ ### 更新内容
139
+ - 增加英文版Readme
140
+
141
+ ## [1.1.3] - 2026-02-26
142
+ ### 更新内容
143
+ - 修复数字字体没有生效的问题
144
+
145
+ ## [1.1.2] - 2026-02-25
146
+ ### 更新内容
147
+ - 更改字体和引用路径
148
+
149
+ ## [1.1.1] - 2026-02-24
150
+ ### 更新内容
151
+ - 修复数字字体引用路径的问题
152
+
153
+ ## [1.1.0] - 2026-02-20
154
+ ### 更新内容
155
+ - 增加数字字体
156
+
157
+ ## [1.0.5] - 2025-11-16
158
+ ### 更新内容
159
+ - 更新Readme内容
160
+
161
+ ## [1.0.4] - 2025-11-16
162
+ ### 更新内容
163
+ - 更新Readme内容
164
+
165
+ ## [1.0.3] - 2025-11-16
166
+ ### 更新内容【Breaking Change】
167
+ - 移除 “time-runner/dist/time-runner.css”文件引入
168
+ - 增加 textShadowColor（文字阴影颜色）属性
169
+ - 更新Readme内容，增加功能演示地址。
170
+
171
+
172
+ ## [1.0.2] - 2025-10-11
173
+ ### 更新内容
174
+ - 增加 mode = "drift" 效果
175
+ - 更新Readme内容
176
+
177
+
178
+ ## [1.0.1] - 2025-10-07
179
+ ### 更新内容
180
+ - 更新readme内容
181
+
182
+
183
+ ## [1.0.0] - 2025-10-07
184
+ ### 首次发布
package/dist/TimeRunner.d.ts CHANGED
@@ -7,7 +7,7 @@
7
7
  * drift: 漂浮
8
8
  *
9
9
  */
10
- type TransMode = "card" | "cube-v" | "cube-h" | "drift";
10
+ type TransMode = "card" | "cube-v" | "cube-h" | "drift" | "cut";
11
11
  interface PropsType {
12
12
  /**
13
13
  * 显示模式，默认：default
@@ -22,6 +22,7 @@ interface PropsType {
22
22
  * cube-v：上下翻转
23
23
  * cube-h：左右翻转
24
24
  * drift： 漂浮
25
+ * cut: 切片
25
26
  */
26
27
  mode?: TransMode;
27
28
  /** 尺寸，默认40 */
package/dist/Tools.d.ts CHANGED
@@ -1,3 +1,15 @@
1
1
  export declare const getTimeDiff: (endTime: string) => string;
2
2
  export declare const countTime: (t: number) => string;
3
3
  export declare const isValidTime: (time: string) => boolean;
4
+ /**
5
+ * 分别给两个div设置clip-path属性，
6
+ * 并根据polygon的x、y坐标计算两条线段的长度、位置、角度。
7
+ *
8
+ * @param dom 外层dom
9
+ */
10
+ export declare const getRandomClip: (dom: HTMLDivElement) => {
11
+ lPath: string;
12
+ rPath: string;
13
+ lTranslate: string;
14
+ rTranslate: string;
15
+ };
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
1
+ @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:#fff!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:#fff}