CSS绘制猫猫

作者: AriesMiki | 来源:发表于2022-08-04 13:31 被阅读0次
CSS绘制猫猫的效果如下：
CSS绘制猫猫
下面是完整代码，get起来吧～
浪漫的程序员可以多绘制一些其他图案，送给另一半哟～
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS绘制猫猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
        }

        /* 画布盒子 */
        .box {
            width: 800px;
            height: 500px;
            border: 2px dashed #fff;
            margin: 100px auto;
            position: relative;
        }

        /* 轮廓 */
        .cat {
            width: 400px;
            height: 320px;
            border: 10px solid #020202;
            margin: 130px auto;
            border-radius: 200px 200px 50% 50%;
            background: #efe5d9;
            position: relative;
        }

        /* 耳朵 */
        .ear_l {
            width: 140px;
            height: 140px;
            background: #efe5d9;
            border-left: 10px solid #020202;
            border-top: 10px solid #020202;
            border-radius: 40px 50% 50% 50%;
            position: absolute;
            left: -30px;
            top: -30px;
            z-index: -1;
            transform: rotate(10deg);
        }

        .ear_r {
            width: 140px;
            height: 140px;
            background: #efe5d9;
            border-right: 10px solid #020202;
            border-top: 10px solid #020202;
            border-radius: 50% 40px 50% 50%;
            position: absolute;
            right: -30px;
            top: -30px;
            z-index: -1;
            transform: rotate(-10deg);
        }

        .ear_l_in {
            transform: scale(0.7);
            left: 2px;
            top: 2px;
            background: linear-gradient(120deg, #ea8a6a, #f4a084);
            border: 0;
        }

        .ear_r_in {
            transform: scale(0.7);
            right: 2px;
            top: 2px;
            background: linear-gradient(-120deg, #ea8a6a, #f4a084);
            border: 0;
        }

        /* 花纹 */
        .wang {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            top: 2px;
        }

        .wang div {
            background: #998881;
            width: 30px;
            float: left;
            border-radius: 50%;
        }

        .wang_l {
            height: 80px;
            margin-left: 32px;
        }

        .wang_m {
            height: 100px;
            margin: 0 20px;
        }

        .wang_r {
            height: 80px;
        }


        /* 眼睛 */
        .eye_l {
            position: absolute;
            left: 60px;
        }

        .eye_r {
            position: absolute;
            right: 60px;
        }

        .eye {
            width: 100px;
            height: 100px;
            top: 100px;
            background: linear-gradient(120deg, #f0b334, #fbff80);
            border-radius: 50%;
            transition: 1s;
        }

        .eye_l_t,
        .eye_l_d {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 50%;
        }

        .eye_l_t {
            border-top: 6px solid #000;
        }

        .eye_l_d {
            border-bottom: 6px solid #000;
            overflow: hidden;
        }

        .eye_in {
            width: 50px;
            height: 50px;
            background: #000;
            margin: 20px auto;
            border-radius: 50%;
            position: relative;
            transition: 1s;
        }

        .eye_white {
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            right: -5px;
            top: 2px;
        }

        .eye_white_small {
            width: 20px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            transform: rotate(-20deg);
            position: absolute;
            left: -5px;
            top: 0;
        }

        .eye_white_small.shang {
            top: 26px;
        }

        .eye_white_small.xia {
            top: 40px;
            transform: scale(0.8) rotate(-20deg);
            left: 0;
        }

        /* 鼻子 */
        .nose {
            width: 40px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -20px;
            bottom: 100px;
            border-radius: 50%;
            border-bottom: 26px solid #000;
            transition: 1s;
        }

        /* 嘴巴 */
        .mouth {
            width: 60px;
            height: 50px;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            bottom: 36px;
        }

        .mouth_l,
        .mouth_r {
            width: 100%;
            height: 50px;
            border-bottom: 8px solid #000;
            border-radius: 50%;
            position: absolute;
            top: -36px;
            transition: 1s;
        }

        .mouth_l {
            left: -30px;
            transform-origin: right center;
        }

        .mouth_r {
            right: -30px;
            transform-origin: left center
        }


        /* 胡子 */
        .must {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 180px;
            transition: 1s;
        }

        .one,
        .two,
        .three {
            border-radius: 50%;
            position: absolute;
        }

        .one {
            width: 160px;
            height: 60px;
            border-top: 2px solid #9d8c85;
            transform: rotate(-10deg);
            top: 10px;
        }

        .two {
            width: 200px;
            height: 80px;
            border-top: 2px solid #9d8c85;
            transform: rotate(8deg);
            top: 40px;
        }

        .three {
            width: 140px;
            height: 70px;
            border-top: 2px solid #9d8c85;
            transform: rotate(30deg);
            top: 70px;
        }

        .must_l {
            left: -80px;
            transform: rotateY(180deg) rotateZ(0deg);
        }

        .must_r {
            right: -80px;
        }

        /* 腮红 */
        .face {
            width: 100px;
            height: 50px;
            background: pink;
            opacity: 0;
            filter: blur(10px);
            border-radius: 50%;
            position: absolute;
            top: 190px;
            transition: 1s;
        }

        .face_l {
            left: 50px;
        }

        .face_r {
            right: 50px;
        }


        /* 心形 */
        .love {
            width: 60px;
            height: 100px;
            position: absolute;
            right: 80px;
            top: 0;
            transform: rotate(45deg) scale(0) translateY(400px);
            opacity: 0;
            transition: 0.5s;
        }

        .love1 {
            right: 200px;
            top: 6px;
            transform: rotate(-15deg) scale(0) translateY(400px);
        }

        .love .left,
        .love .right {
            width: 100%;
            height: 100%;
            background: red;
            position: absolute;
            border-radius: 30px 30px 0 0;
        }

        .love .left {
            transform-origin: center bottom;
            transform: translateX(21px) rotate(-45deg);
        }

        .love .right {
            transform-origin: center bottom;
            transform: translateX(-21px) rotate(45deg);
        }

        /* 动效 */
        .cat:hover .eye {
            height: 86px;
        }

        .cat:hover .eye_in {
            margin-top: 10px;
        }

        .cat:hover .face {
            opacity: 0.8;
        }

        .cat:hover .nose {
            bottom: 104px;
        }

        .cat:hover .mouth_l {
            transform: rotate(20deg);
        }

        .cat:hover .mouth_r {
            transform: rotate(-20deg);
        }

        .cat:hover .must_l {
            transform: rotateY(180deg) rotateZ(10deg);
        }

        .cat:hover .must_r {
            transform: rotateZ(10deg);
        }

        .box:hover .love {
            opacity: 1;
            transform: rotate(45deg) scale(1) translateY(0);
        }

        .box:hover .love1 {
            transform: rotate(-15deg) scale(0.6) translateY(0);
        }
    </style>
</head>

<body>



    <div class="box">

        <div class="cat">
            <div class="ear_l">
                <div class="ear_l ear_l_in"></div>
            </div>
            <div class="ear_r">
                <div class="ear_r ear_r_in"></div>
            </div>
            <div class="wang">
                <div class="wang_l"></div>
                <div class="wang_m"></div>
                <div class="wang_r"></div>
            </div>
            <div class="eye eye_l">
                <div class="eye_l_t">
                    <div class="eye_l_d">
                        <div class="eye_in">
                            <div class="eye_white"></div>
                            <div class="eye_white_small shang"></div>
                            <div class="eye_white_small xia"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="eye eye_r">
                <div class="eye_l_t">
                    <div class="eye_l_d">
                        <div class="eye_in">
                            <div class="eye_white"></div>
                            <div class="eye_white_small shang"></div>
                            <div class="eye_white_small xia"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nose"></div>
            <div class="mouth">
                <div class="mouth_l"></div>
                <div class="mouth_r"></div>
            </div>
            <div class="must must_r">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </div>
            <div class="must must_l">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </div>
            <div class="face face_l"></div>
            <div class="face face_r"></div>
        </div>

        <div class="love">
            <div class="left"></div>
            <div class="right"></div>
        </div>

        <div class="love love1">
            <div class="left"></div>
            <div class="right"></div>
        </div>

    </div>

</body>

</html>
CSS绘制猫猫

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读
