带有动画效果的数字卡片翻转图片中实现了一个带有动画效果的卡片翻转组件，主要用于展示数字或内容。整体结构分为HTML容器样

图片中实现了一个带有动画效果的卡片翻转组件，主要用于展示数字或内容。整体结构分为HTML容器样式定义、卡片样式定义、动画效果定义三部分。

容器样式

.container定义了主容器的样式，采用绝对定位居中，宽度908px，高度150px，背景色为深蓝色（#0d2137），底部有蓝色边框（#3b82f6），圆角12px。

.item定义了单个卡片的样式，宽度72px，高度130px，使用线性渐变背景（从深蓝到中蓝），圆角12px，相对定位并设置外边距。

卡片分层

.under和.on定义了卡片的正反面样式，绝对定位覆盖整个卡片区域，文字居中，颜色为黄色（#FACA38），字体大小80px。

.bottom定义了卡片下半部分的样式，绝对定位在卡片下半区，高度50%，同样使用渐变背景，通过overflow: hidden隐藏上半部分内容。

动画效果

.animate定义了核心翻转动画flip，持续1秒，正常方向播放，结束后保持最终状态。动画从180度旋转开始（背面朝上），逐渐旋转到0度（正面朝上）。

.animate1到.animate9设置了不同的动画延迟（0.3秒递增），用于实现多个卡片依次翻转的效果。

技术要点

使用CSS3的transform和@keyframes实现3D翻转效果
通过animation-delay实现序列动画
利用overflow: hidden和绝对定位实现卡片分层
采用线性渐变背景增强视觉效果
使用animation-fill-mode: forwards保持动画结束状态

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数字翻牌效果</title>
    <style>
        body {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }

        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 908px;
            height: 150px;
            background-color: #0d2137;
            border-bottom: 5px solid #3b82f6;
            border-radius: 12px;
        }

        .item {
            position: relative;
            margin: 8px 5px 0;
            display: inline-block;
            width: 72px;
            height: 130px;
            background: -webkit-linear-gradient(#0a1929, #1e3a8a, #114088);
            background: -o-linear-gradient(#0a1929, #1e3a8a, #114088);
            background: -moz-linear-gradient(#0a1929, #1e3a8a, #114088);
            background: linear-gradient(#0a1929, #1e3a8a, #114088);
            border-radius: 12px;
        }

        .under,
        .on {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 130px;
            color: #FACA38;
            font-size: 80px;
            border-radius: 12px;
            overflow: hidden;
        }

        .bottom {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 50%;
            line-height: 0;
            overflow: hidden;
            /*不加这行就不会隐藏掉上面那半个数字部分*/
            background: -webkit-linear-gradient(#1e3a8a, #114088);
            background: -o-linear-gradient(#1e3a8a, #114088);
            background: -moz-linear-gradient(#1e3a8a, #114088);
            background: linear-gradient(#1e3a8a, #114088);
        }

        .animate {
            animation-name: flip;
            animation-duration: 1s;
            animation-direction: normal;
            animation-fill-mode: forwards;
        }

        .animate1 {
            animation-delay: .3s;
            -webkit-animation-delay: .3s;
        }

        .animate2 {
            animation-delay: .6s;
        }

        .animate3 {
            animation-delay: .9s;
        }

        .animate4 {
            animation-delay: 1.2s;
        }

        .animate5 {
            animation-delay: 1.5s;
        }

        .animate6 {
            animation-delay: 1.8s;
        }

        .animate7 {
            animation-delay: 2.1s;
        }

        .animate8 {
            animation-delay: 2.4s;
        }

        .animate9 {
            animation-delay: 2.7s;
        }

        @keyframes flip {
            from {
                transform: rotateX(180deg);
                width: 100%;
            }

            to {
                transform: rotateX(0);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">
            <!--底下那层-->
            <div class="under">9</div>
            <!--上面会翻动的那层-->
            <div class="on animate animate0">
                <!--只需要下面那一半-->
                <div class="bottom">9</div>
            </div>
        </div>
        <div class="item">
            <div class="under">8</div>
            <div class="on animate animate1">
                <div class="bottom">
                    <div class="num">8</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">7</div>
            <div class="on animate animate2">
                <div class="bottom">
                    <div class="num">7</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">6</div>
            <div class="on animate animate3">
                <div class="bottom">
                    <div class="num">6</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">5</div>
            <div class="on animate animate4">
                <div class="bottom">
                    <div class="num">5</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">4</div>
            <div class="on animate animate5">
                <div class="bottom">
                    <div class="num">4</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">3</div>
            <div class="on animate animate6">
                <div class="bottom">
                    <div class="num">3</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">2</div>
            <div class="on animate animate7">
                <div class="bottom">
                    <div class="num">2</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">1</div>
            <div class="on animate animate8">
                <div class="bottom">
                    <div class="num">1</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="under">0</div>
            <div class="on animate animate9">
                <div class="bottom">
                    <div class="num">0</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

后续改进建议

可考虑添加perspective属性增强3D效果
动画时间参数可调整为CSS变量便于统一修改
移动端需要增加响应式适配
可添加JavaScript交互控制动画触发