React实现翻页时钟的代码示例

作者：小积木时间：2026-10-30 23:22:29浏览：395

本文介绍在React中实现翻页时钟的方法。通过CSS3 3D变换叠加数字上下部分，利用JS控制时分秒组件间的联动与状态更新，实现完整的翻页动画效果。

1. 布局、样式、翻页动画

翻页时钟将数字拆分为上下两部分，通过设置 position 使所有数字元素在同一位置叠加。动画逻辑为：当前显示时间的 up 部分向下翻转至屏幕垂直位置，此时下一个时间的 down 部分同时向下翻转，从而完成翻页效果。

HTML 结构如下所示：

<div class="container">
    <ul class="flip">
        <li>
            <div class="up">
                <div class="content">0</div>
            </div>
            <div class="down">
                <div class="content">0</div>
            </div>
        </li>
        <li>
            <div class="up">
                <div class="content">1</div>
            </div>
            <div class="down">
                <div class="content">1</div>
            </div>
        </li>
    </ul>
</div>

CSS 样式

.container {
	height: 90px;
}
.container .flip {
	position: relative;
	float: left;
	width: 60px;
	height: 100%;
	margin: 0 5px;
}
.flip li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 80px;
	text-align: center;
	line-height: 90px;
	font-weight: bold;
	border-radius: 6px;
	perspective: 200px;
	transform-style: preserve-3d;
}
.flip li:first-child {
	z-index: 2;
}
// 设置class为up和down的高度为父元素容器的一半高度
.flip li > div {
	position: absolute;
	left: 0;
	height: 50%;
	width: 100%;
	overflow: hidden;
}
.flip .up {
	/* 改变选中轴的位置 使翻转轴位于up、down部分的中间*/
	transform-origin: 0 100%;
	top: 0;
	border-radius: 4px;
}
.flip .down {
	/* 改变选中轴的位置 使翻转轴位于up、down部分的中间 */
	transform-origin: 0 0;
	bottom: 0;
	border-radius: 4px;
}
.flip .content {
	position: absolute;
	width: 100%;
	border-radius: 6px;
	color: #ccc;
	background-color: #333;
	text-shadow: 0 1px 2px #000;
}
.flip .up .content {
	top: 0;
}
.flip .down .content {
	bottom: 0;
}
// 设置翻页折痕
.flip .up::after {
	content: "";
	position: absolute;
	top: 43px;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: rgba(0, 0, 0, 0.4);
}

实现的3D效果如下：

1. 布局、样式、翻页动画