动画：扑克牌翻转

最新推荐文章于 2024-05-05 11:27:28 发布

落雁霞

最新推荐文章于 2024-05-05 11:27:28 发布

阅读量105

点赞数

文章标签：动画 css3 css

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

版权

 <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>