css写一个大白

用css画出一个可爱的大白(●—●)，接下来话不多说直接上代码

html代码

<body>
        <figure class="baymax">
            <div class="head">
                <span class="eyes"></span>
            </div>

            <div class="body">
                <div class="chest">
                    <span class="button"></span>
                </div>
                <div class="belly"></div>
                <div class="arm left">
                    <span class="fingers"></span>
                </div>
                <div class="arm right">
                    <span class="fingers"></span>
                </div>
            </div>
            
            <div class="legs">
                <div class="leg left"></div>
                <div class="leg right"></div>
            </div>
        </figure>
    </body>

css代码

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(176, 0, 0, 0.75);
    }

    .baymax {
        font-size: 10px;
        width: 30em;
        height: 41em;
        color: white;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .baymax * {
        position: absolute;
    }

    .baymax *::before,
    .baymax *::after {
        content: '';
        position: absolute;
    }

    .head {
        width: 9em;
        height: 6em;
        background-color: currentColor;
        border-radius: 50%;
        box-shadow: 
            inset 0 -1.5em 3em rgba(0, 0, 0, 0.2),
            0 0.5em 1.5em rgba(0, 0, 0, 0.2);
    }

    .head .eyes {
        position: absolute;
        width: 4.8em;
        height: 0.1em;
        background-color: #222;
        top: 2.3em;
        left: calc((9em - 4.8em) / 2);
    }

    .head .eyes::before,
    .head .eyes::after {
        width: 0.8em;
        height: 0.9em;
        background-color: #222;
        border-radius: 50%;
        top: -0.3em;
    }

    .head .eyes::before {left: 0;}
    .head .eyes::after {right: 0;}

    .body {
        width: inherit;
    }

    .body .chest {
        position: absolute;
        width: 19em;
        height: 26em;
        background-color: currentColor;
        top: 4em;
        left: calc((100% - 19em) / 2);
        border-radius: 50%;
        z-index: -1;
    }

    .body .chest .button {
        position: absolute;
        width: 2em;
        height: 2em;
        background-color: currentColor;
        border-radius: 50%;
        top: 4em;
        right: 4em;
        box-shadow: 
            inset 0 -0.5em 0.8em rgba(0, 0, 0, 0.15),
            0.2em 0.3em 0.2em rgba(0, 0, 0, 0.05);
        filter: opacity(0.75);
    }

    .body .belly {
        position: absolute;
        width: 24em;
        height: 31em;
        background-color: currentColor;
        top: 5.5em;
        left: calc((100% - 24em) / 2);
        border-radius: 50%;
        z-index: -2;
        box-shadow: 
            inset 0 -2.5em 4em rgba(0, 0, 0, 0.15),
            0 0.5em 1.5em rgba(0, 0, 0, 0.25);
    }

    .body .arm {
        position: absolute;
        top: 7.5em;
    }

    .body .arm::before,
    .body .arm::after {
        background-color: currentColor;
        border-radius: 50%;
        transform-origin: top;
        z-index: -3;
    }

    .body .arm::before {
        width: 9em;
        height: 20em;
        left: 7em;
        transform: rotate(30deg);
    }

    .body .arm::after {
        width: 8em;
        height: 15em;
        top: 9.5em;
        left: -0.8em;
        transform: rotate(-5deg);
        box-shadow: inset 0.4em -1em 1em rgba(0, 0, 0, 0.2);
    }

    .body .arm .fingers::before,
    .body .arm .fingers::after {
        width: 1.8em;
        height: 4em;
        background-color: currentColor;
        border-radius: 50%;
        transform-origin: top;
    }

    .body .arm .fingers::before {
        top: 22em;
        left: 2em;
        transform: rotate(-25deg);
        box-shadow: inset 0.2em -0.4em 0.4em rgba(0, 0, 0, 0.4);
    }

    .body .arm .fingers::after {
        top: 21.5em;
        left: 4.8em;
        transform: rotate(-5deg);
        box-shadow: inset -0.2em -0.4em 0.8em rgba(0, 0, 0, 0.3);
        z-index: -3;
    }

    .body .arm.right {
        transform: scaleX(-1);
        right: 0;
        z-index: -3;
    }

    .legs {
        position: absolute;
        width: 15em;
        height: 16em;
        bottom: 0;
        transform: translateX(2.5em);
        z-index: -3;
    }

    .legs .leg {
        width: 5em;
        height: inherit;
        background-color: currentColor;
        border-radius: 0 0 1.5em 0;
        box-shadow: inset -0.7em -0.6em 0.7em rgba(0, 0, 0, 0.1);
    }

    .legs .leg::before {
        width: 2.5em;
        height: inherit;
        background-color: currentColor;
        left: -2.5em;
        border-radius: 0 0 0 100%;
        box-shadow: inset 0.7em 1.5em 0.7em rgba(0, 0, 0, 0.4);
    }

    .legs .leg.right {
        transform-origin: right;
        transform: scaleX(-1);
    }

本站网络名称： 蚩梦博客

本站永久网址： https://chimengblog.com/

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ45096653删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

css写一个大白

请登录后发表评论

今日天气

当梦境纷繁，蚩梦仍在等你。