斗地主小游戏

最新推荐文章于 2025-04-18 12:38:14 发布
datalover
最新推荐文章于 2025-04-18 12:38:14 发布
阅读量477
点赞数 3
文章标签： css css3 html
本文链接：https://blog.youkuaiyun.com/datalover/article/details/146081588
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>斗地主</title>
    <style>
        .game-container {
     
            width: 1000px;
            height: 700px;
            margin: 0 auto;
            position: relative;
            background: #35654d;
            border-radius: 10px;
            padding: 20px;
        }

        .player-area {
     
            position: absolute;
            padding: 10px;
        }

        #player1 {
     
            left: 20px;
            top: 40%;
            transform: translateY(-50%);
            width: 100px;
            height: 400px;
        }

        #player2 {
     
            right: 20px;
            top: 40%;
            transform: translateY(-50%);
            width: 100px;
            height: 400px;
        }

        .played-area.vertical-cards .card {
     
            margin-bottom: -50px;
            transform-origin: center;
            margin-right: 0;
            display: block;
            /* 改为块级元素实现垂直排列 */
        }

        #player1Played {
     
            left: 160px;
            top: 45%;
            transform: translateY(-50%);
            width: 100px;
            /* 调整宽度适应单张牌 */
            height: 200px;
            display: flex;
            flex-direction: column;
            /* 垂直方向排列 */
            align-items: center;
        }

        #player2Played {
     
            right: 160px;
            top: 45%;
            transform: translateY(-50%);
            width: 100px;
            /* 调整宽度适应单张牌 */
            height: 200px;
            display: flex;
            flex-direction: column;
            /* 垂直方向排列 */
            align-items: center;
        }

        #playerHand {
     
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 740px;
            height: 120px;
        }

        .vertical-cards .card {
     
            margin-bottom: -50px;
            transform-origin: center;
            margin-right: 0;
        }

        .vertical-cards .card {
     
            margin-bottom: -50px;
            transform-origin: center;
            margin-right: 0;
        }

        .played-area {
     
            position: absolute;
            width: 200px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }



        #playerPlayed {
     
            left: 50%;
            bottom: 220px;
            transform: translateX(-50%);
        }

        .card {
     
            display: inline-block;
            width: 50px;
            height: 70px;
            background: white;
            border: 1px solid #000;
            margin-right: -25px;
            text-align: left;
            padding: 5px;
            cursor: pointer;
            user-select: none;
            position: relative;
            vertical-align: top;
            font-weight: bold;
        }

        .card::before {
     
            content: attr(data-value);
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 12px;
        }

        .card:hover {
     
            transform: translateY(-14px);
            transition: transform 0.2s ease;

        }

        .card.selected {
     
            transform: translateY(-14px);
            background: #ffeb3b;

        }

        #player1 .card {
     
            transform: rotate(90deg);
            margin-bottom: -50px;
        }

        #player2 .card {
     
            transform: rotate(-90deg);
            margin-bottom: -50px;
        }

        #player1Played .card {
     
            transform: rotate(90deg);
            margin-bottom: -50px;
            vertical-align: top;
        }

        /* #player2Played .card {
            transform: rotate(-90deg);
            margin-bottom: -50px;
            vertical-align: top;
        } */

        #player2Played .card {
     
            transform: rotate(-90deg);
            margin-bottom: -50px;
            vertical-align: top;
            position: relative;
            /* 添加相对定位 */
        }

        #player2Played .card:nth-child(1) {
     
            z-index: 10;
        }

        #player2Played .card:nth-child(2) {
     
            z-index: 9;
        }

        #player2Played .card:nth-child(3) {
     
            z-index: 8;
        }

        #player2Played .card:nth-child(4) {
     
            z-index: 7;
        }

        #player2Played .card:nth-child(5) {
     
            z-index: 6;
        }

        #player2Played .card:nth-child(6) {
     
            z-index: 5;
        }

        #player2Played .card:nth-child(7) {
     
            z-index: 4;
        }

        #player2Played .card:nth-child(8) {
     
            z-index: 3;
        }

        #player2Played .card:nth-child(9) {
     
            z-index: 2;
        }

        #player2Played .card:nth-child(10) {
     
            z-index: 1;
        }

        .vertical-cards .card:hover {
     
            transform: rotate(-90deg) translateX(-14px);
        }

        #player2 .card:hover {
     
            transform: rotate(90deg) translateX(-14px);
        }

        .vertical-cards .card.selected {
     
            transform: rotate(-90deg) translateX(-14px);
        }

        #player2 .card.selected {
     
            transform: rotate(90deg) translateX(-14px);
        }

        .card.red {
     
            color: red;
        }

        .card.black {
     
            color: black;
        }

        .card.joker {
     
            color: #ff4081;
        }

        .card.jokerSmall {
     
            color: black;
        }

        .played-cards {
     
            position: absolute;
            top: 50%;
            left
最低0.47元/天解锁文章