动画：扑克牌翻转_egret 扑克牌反转效果-CSDN博客

本文链接：https://blog.csdn.net/m0_61373758/article/details/123198609

此博客展示了如何使用HTML和CSS创建一个交互式的扑克牌游戏，通过CSS动画实现牌面的逐个旋转，营造出独特的视觉体验。通过:hover伪类和transform属性，代码实现了鼠标悬停时牌面的不同旋转角度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../images/赌神.jpeg)no-repeat;
            background-size: cover;
        }

        .pk {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;

        }

        .pk>img {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 过渡 */
            transition: all 1s;
            /* 旋转位置 */
            transform-origin: center bottom;
        }

        /* 每个扑克绕着圆心旋转 */
        .pk:hover>img:nth-child(1) {
            transform: rotate(-60deg);
        }

        .pk:hover>img:nth-child(2) {
            transform: rotate(-50deg);
        }

        .pk:hover>img:nth-child(3) {
            transform: rotate(-40deg);
        }

        .pk:hover>img:nth-child(4) {
            transform: rotate(-30deg);
        }

        .pk:hover>img:nth-child(5) {
            transform: rotate(-20deg);
        }

        .pk:hover>img:nth-child(6) {
            transform: rotate(-10deg);
        }

        .pk:hover>img:nth-child(7) {
            transform: rotate(0deg);
        }

        .pk:hover>img:nth-child(8) {
            transform: rotate(10deg);
        }

        .pk:hover>img:nth-child(9) {
            transform: rotate(20deg);
        }

        .pk:hover>img:nth-child(10) {
            transform: rotate(30deg);
        }


        .pk:hover>img:nth-child(11) {
            transform: rotate(40deg);
        }

        .pk:hover>img:nth-child(12) {
            transform: rotate(50deg);
        }

        .pk:hover>img:nth-child(13) {
            transform: rotate(60deg);
        }

        /* 隐藏反面牌 */
        .pk:hover>img:last-child {
            display: none;
        }
    </style>

<body>
    <div class="pk">
        <img src="../images/c-1.png" alt="">
        <img src="../images/c-2.png" alt="">
        <img src="../images/c-3.png" alt="">
        <img src="../images/c-4.png" alt="">
        <img src="../images/c-5.png" alt="">
        <img src="../images/c-6.png" alt="">
        <img src="../images/c-7.png" alt="">
        <img src="../images/c-8.png" alt="">
        <img src="../images/c-9.png" alt="">
        <img src="../images/c-10.png" alt="">
        <img src="../images/c-11.png" alt="">
        <img src="../images/c-12.png" alt="">
        <img src="../images/c-13.png" alt="">
        <img src="../images/back.png" alt="">
    </div>
</body>