Html笔记（）：蜘蛛纸牌之卡片设计

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #2b2b2b;
            }
            .card{
                /*设置卡牌的外观*/
                width: 150px;
                height: 200px;
                background-color: #00ffcc;
                border-radius: 10px;
                /*为卡牌中间的图案设置格式*/
                font-size: 100px;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
                /*方便左上角和右下角的数字定位*/
                position: relative;
                /*避免选择到文本*/
                user-select: none;
            }
            /*设置卡牌两个对角的数字格式*/
            .pos-TL{
                position: absolute;
                font-size: 20px;
                top :5px;
                left: 5px;
            }
            .pos-BR{
                position: absolute;
                font-size: 20px;
                bottom: 5px;
                right: 5px;
                transform: rotateZ(180deg);
            }
        </style>
    </head>
    <body>
        <!--把卡牌里的元素都放到卡牌这个容器里,对卡牌的动画会传到卡牌元素里-->
        <div class="card">♠️
            <div class="card-num pos-TL">6</div>
            <div class="card-num pos-BR">6</div>
        </div>
    </body>
</html>

分析

这里的一些收获是复盘的时候，对容器的思路更加清晰。

Html笔记（）：蜘蛛纸牌之卡片设计

效果

代码

分析

悦读