H5、CSS3、JS学习笔记（一）——CSS画一只小绵羊

本文链接：https://blog.csdn.net/u014038143/article/details/108811564
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Sheep</title>
        <style>
            :root {
                --fluff-size: 70px;
                --ear-width: 15px;
                --ear-height: 20px;
            }

            body {
                background: #54a865;
            }

            .sheep {
                position: relative;
                margin: auto;
                display: block;
                margin-top: 8%;
                margin-bottom: 8%;
                width: 180px;
                height: 180px;
            }

            /* MIDDLE FLUFF -> Both left & right fluff circles share this style */
            .fluff {
                position: absolute;
                width: var(--fluff-size);
                height: var(--fluff-size);
                border-radius: 50%;
                background: white;
                top: 50px;
            }

            /* RIGHT MIDDLE FLUFF only -> this places the right-hand section of fluff over to the right */
            .fluff.right {
                right: 0;
            }

            /* UPPER FLUFF -> These styles are shared between the first child of both left and right fluff */
            .fluff::before {
                content: "";
                position: absolute;
                width: var(--fluff-size);
                height: var(--fluff-size);
                border-radius: 50%;
                background: white;
                top: -35px;
            }

            /* UPPER-LEFT FLUFF only */
            .fluff.left::before {
                left: 35px;
            }

            /* UPPER-RIGHT FLUFF only */
            .fluff.right::before {
                left: -35px;
            }

            /* LOWER FLUFF -> These styles are shared between the last child of both left and right fluff */
            .fluff::after {
                content: "";
                top: 35px;
                position: absolute;
                width: var(--fluff-size);
                height: var(--fluff-size);
                border-radius: 50%;
                background: white;
            }

            /* LOWER LEFT FLUFF only */
            .fluff.left::after {
                left: 35px;
            }

            /* LOWER RIGHT FLUFF only */
            .fluff.right::after {
                left: -35px;
            }

            .head {
                position: absolute;
                left: 50%;
                top: 30px;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                width: 70px;
                height: 70px;
                background: black;
                border-radius: 50%;
            }

            /* LEFT ear */
            .head::before {
                content: "";
                position: absolute;
                background: black;
                width: var(--ear-width);
                height: var(--ear-height);
                border-radius: 50%;
                top: -5px;
                left: 5px;
            }

            /* RIGHT ear */
            .head::after {
                content: "";
                position: absolute;
                background: black;
                width: var(--ear-width);
                height: var(--ear-height);
                border-radius: 50%;
                top: -5px;
                right: 5px;
            }

            /* These styles are shared for both left and right eyes */
            .eye {
                position: absolute;
                background: black;
                border: 5px solid white;
                height: 10px;
                width: 10px;
                border-radius: 50%;
                top: 15px;
            }

            /* LEFT eye positioning */
            .eye.left {
                left: 10px;
            }

            /* RIGHT eye positioning */
            .eye.right {
                right: 10px;
            }

            .mouth {
                position: absolute;
                bottom: -10px;
                /*  This combo of left and transform centers horizontally within the parent element  */
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                background: white;
                width: 30px;
                height: 30px;
                /*  Clip path creates the semi circle shape  */
                -webkit-clip-path: circle(50% at 50% 0);
                clip-path: circle(50% at 50% 0);
            }

            /* Shared styles for both LEFT and RIGHT legs */
            .leg {
                position: absolute;
                top: 120px;
                height: 50px;
                width: 15px;
                background: black;
                border-radius: 30%;
            }

            /* LEFT leg positioning */
            .leg.left {
                left: 30%;
                -webkit-transform: translateX(-30%);
                transform: translateX(-30%);
            }

            /* RIGHT leg positioning */
            .leg.right {
                right: 30%;
                -webkit-transform: translateX(30%);
                transform: translateX(30%);
            }
        </style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <body>
            <div class="sheep">
                <div class="leg left"></div>
                <div class="leg right"></div>
                <div class="fluff left">
                    <!--  ::before fluff appears as if entered here      -->
                    <!--  ::after fluff appears as if entered here      -->
                </div>
                <div class="fluff right"></div>
                <div class="head">
                    <!--   ::before ear element appears as if entered here     -->
                    <div class="eye left"></div>
                    <div class="eye right"></div>
                    <div class="mouth"></div>
                    <!--   ::after ear element appears as if entered here     -->
                </div>
            </div>
        </body>
        <!-- partial -->

    </body>
</html>