纯css绘制卡通人物形象-html代码-BFW代码库

纯css绘制卡通人物形象

代码语言：html

代码描述：纯css绘制卡通人物形象

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
        background: rgb(133, 190, 234);
        width: 100vw;
        height: 100vh;
}

.container {
        position: absolute;
        top: 20%;
        left: 25%;
        width: 500px;
        height: 700px;
}

.head {
        position: absolute;
        height: 45%;
        width: 100%;
}

.hat {
        position: absolute;
        height: 50%;
        width: 80%;
        background: rgb(69, 167, 91);
        background: linear-gradient(
                190deg,
                rgba(69, 167, 91, 1) 31%,
                rgba(18, 109, 39, 1) 70%,
                rgba(7, 77, 0, 1) 88%
        );
        border-radius: 70% 80% 5% 70%;
        top: -17%;
        left: 17%;
        transform: rotate(-45deg);
        z-index: -10;
}

#shade {
        position: absolute;
        height: 90%;
        width: 70%;
        right: 15%;
        top: 13%;
        border-radius: 0% 0% 40% 50%;
        z-index: 3;
        background: rgb(241, 135, 99, 0.3);
        background: linear-gradient(
                120deg,
                rgba(241, 135, 99, 0) 55%,
                rgba(241, 135, 99, 1) 76%
        );
}

.face {
        position: absolute;
        height: 100%;
        width: 70%;
        left: 10%;
        top: 5%;
        border-radius: 0% 0% 40% 50%;
        background: rgb(241, 135, 99);
        background: linear-gradient(
                155deg,
                rgba(241, 135, 99, 1) 18%,
                rgba(255, 242, 178, 1) 35%,
                rgba(250, 205, 151, 1) 61%,
                rgba(241, 135, 99, 1) 86%
        );
        z-index: 2;
        box-shadow: 40px -8px rgb(241, 135, 99);
}

.face::before {
        content: "";
        position: absolute;
        background: rgb(241, 135, 99, 0.3);
        background: linear-gradient(
                -30deg,
                rgba(241, 135, 99, 0) 20%,
                rgba(241, 135, 99, 0.7) 90%
        );
        transform: rotate(0deg);
        width: 7%;
        height: 7%;
        left: 33%;
        top: 65%;
        border-radius: 10% 30% 50% 50%;
}

.eyes {
        position: absolute;
        height: 25%;
        width: 12%;
        left: 15%;
        top: 35%;
        border-radius: 50%;
        background: rgb(255, 255, 255);
        background: linear-gradient(
                130deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(0, 0, 0, 1) 39%
        );
        z-index: 6;
        border: solid 2px black;
}

.eyes::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        left: 280%;
        top: -7%;
        border-radius: 45%;
        background: rgb(255, 255, 255);
        background: linear-gradient(
                130deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(0, 0, 0, 1) 39%
        );
        border: solid 2px black;
}

.eyebrows {
        position: absolute;
        height: 8%;
        width: 26%;
        left: 2%;
        top: 22%;
        border-radius: 10% 89% 0% 92% / 12% 91% 0% 64%;
        background: #6f3517;
}

.eyebrows::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 175%;
        top: -35%;
        border-radius: 89% 10% 92% 0% / 91% 12% 64% 0%;
        background: #6f3517;
        transform: rotate(-10deg);
}

.eyebrows::after {
        content: "";
        width: 90%;
        height: 100%;
        position: absolute;
        left: 100%;
        top: 700%;
        border-radius: 50%;
        border-top: solid 5px #6f3517;
}

.left-ear {
        position: absolute;
        height: 25%;
        width: 20%;
        background: rgba(255, 242, 178, 1);
        border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
        left: -5%;
        top: 42%;
        transform: rotate(-8deg);
}

.left-ear::before {
        position: absolute;
        content: "";
        width: 85%;
        height: 40%;
        border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
        transform: rotate(16deg);
        background: rgb(241, 135, 99, 0.7);
        background: linear-gradient(
                36deg,
                rgba(241, 135, 99, 0) 25%,
                rgba(241, 135, 99, 1) 76%
        );
        left: 10%;
        bottom: 25%;
}

.right-ear {
        position: absolute;
        height: 35%;
        width: 50%;
        right: -30%;
        top: 20%;
        border-radius: 86% 4% 92% 8% / 47% 7% 93% 0%;
        background: rgb(241, 135, 99);
        background: linear-gradient(
                100deg,
                rgba(241, 135, 99, 1) 23%,
                rgba(255, 242, 178, 1) 72%
        );
        transform: .........完整代码请登录后点击上方下载按钮下载查看