使用HTML+CSS画出2022年北京冬奥会吉祥物冰墩墩

452 阅读1分钟

QQ截图20220213191224.png

部分源码

<div class="bdd">

            <div class="m_body"></div>

            <div class="ear1"></div>

            <div class="ear2"></div>

            <div class="eye1"></div>

            <div class="eye2"></div>

            <div class="face c_blue"></div>

            <div class="face c_red"></div>

            <div class="face c_purple"></div>

            <div class="face c_yellow"></div>

            <div class="face c_green"></div>

            <div class="nose"></div>

            <div class="mouse"></div>

            <div class="arm1"></div>

            <div class="arm2"></div>

            <div class="leg1"></div>

            <div class="leg2"></div>

        </div>
<style>

    * {

        margin: 0;

        padding: 0

    }

\


    body {

        font: 15px ;

        background: #d4ebf1;

    }

\


    .bdd {

        position: absolute;

        left: 50%;

        top: 50%;

        width: 600px;

        height: 500px;

        margin-top: -250px;

        margin-left: -300px;

    }

\


    .m_body {

        width: 362px;

        height: 410px;

        border: #393939 8px solid;

        margin: 50px auto;

        border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;

        position: absolute;

        left: 109px;

        top: -30px;

        background: url(logo.png) no-repeat center bottom 20px #fff;

        background-size: 63px;

    }

\