用纯css画一个小企鹅

灰太狼 2022-08-29 12:52 258阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS基础</title>
    </head>
    <style>
        .penguin {
    
            /* add code below */
    
            /* add code above */
            position: relative;
            margin: auto;
            display: block;
            margin-top: 5%;
            width: 300px;
            height: 300px;
        }
    
        .penguin-top {
            top: 10%;
            left: 25%;
            background: black;
            width: 50%;
            height: 45%;
            border-radius: 70% 70% 60% 60%;
        }
    
        .penguin-bottom {
            top: 40%;
            left: 23.5%;
            background: black;
            width: 53%;
            height: 45%;
            border-radius: 70% 70% 100% 100%;
        }
    
        .right-hand {
            top: 0%;
            left: -5%;
            background: black;
            width: 30%;
            height: 60%;
            border-radius: 30% 30% 120% 30%;
            transform: rotate(45deg);
            z-index: -1;
        }
    
        .left-hand {
            top: 0%;
            left: 75%;
            background: black;
            width: 30%;
            height: 60%;
            border-radius: 30% 30% 30% 120%;
            transform: rotate(-45deg);
            z-index: -1;
        }
    
        .right-cheek {
            top: 15%;
            left: 35%;
            background: white;
            width: 60%;
            height: 70%;
            border-radius: 70% 70% 60% 60%;
        }
    
        .left-cheek {
            top: 15%;
            left: 5%;
            background: white;
            width: 60%;
            height: 70%;
            border-radius: 70% 70% 60% 60%;
        }
    
        .belly {
            top: 60%;
            left: 2.5%;
            background: white;
            width: 95%;
            height: 100%;
            border-radius: 120% 120% 100% 100%;
        }
    
        .right-feet {
            top: 85%;
            left: 60%;
            background: orange;
            width: 15%;
            height: 30%;
            border-radius: 50% 50% 50% 50%;
            transform: rotate(-80deg);
            z-index: -2222;
        }
    
        .left-feet {
            top: 85%;
            left: 25%;
            background: orange;
            width: 15%;
            height: 30%;
            border-radius: 50% 50% 50% 50%;
            transform: rotate(80deg);
            z-index: -2222;
        }
    
        .right-eye {
            top: 45%;
            left: 60%;
            background: black;
            width: 15%;
            height: 17%;
            border-radius: 50%;
        }
    
        .left-eye {
            top: 45%;
            left: 25%;
            background: black;
            width: 15%;
            height: 17%;
            border-radius: 50%;
        }
    
        .sparkle {
            top: 25%;
            left: 15%;
            background: white;
            width: 35%;
            height: 35%;
            border-radius: 50%;
        }
    
        .blush-right {
            top: 65%;
            left: 15%;
            background: pink;
            width: 15%;
            height: 10%;
            border-radius: 50%;
        }
    
        .blush-left {
            top: 65%;
            left: 70%;
            background: pink;
            width: 15%;
            height: 10%;
            border-radius: 50%;
        }
    
        .beak-top {
            top: 60%;
            left: 40%;
            background: orange;
            width: 20%;
            height: 10%;
            border-radius: 50%;
        }
    
        .beak-bottom {
            top: 65%;
            left: 42%;
            background: orange;
            width: 16%;
            height: 10%;
            border-radius: 50%;
        }
    
        body {
            background: #c6faf1;
        }
    
        .penguin * {
            position: absolute;
        }
    </style>
    
    <body>
    
        <div class="penguin">
            <div class="penguin-bottom">
                <div class="right-hand"></div>
                <div class="left-hand"></div>
                <div class="right-feet"></div>
                <div class="left-feet"></div>
            </div>
            <div class="penguin-top">
                <div class="right-cheek"></div>
                <div class="left-cheek"></div>
                <div class="belly"></div>
                <div class="right-eye">
                    <div class="sparkle"></div>
                </div>
                <div class="left-eye">
                    <div class="sparkle"></div>
                </div>
                <div class="blush-right"></div>
                <div class="blush-left"></div>
                <div class="beak-top"></div>
                <div class="beak-bottom"></div>
            </div>
        </div>
    </body>
    
    </html>