原生html+css+js制作宠物小精灵icon

发布时间：2023-06-23 19:30

前言

上百个pokemon icon，纯html+css绘制，分享给大家！
\"请添加图片描述\"

文章目录

一、皮卡丘

1.皮卡丘

\"在这里插入图片描述\"
pikachu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pikachu</title>
    <link rel="stylesheet" href="pikachu.css">
</head>
<body>

<div class='pokemon'>
    <div class='electric' id='pikachu'>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

pikachu.css


@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#pikachu {
    background: #fae57c; }
#pikachu:before, #pikachu:after {
    width: 19.53%;
    height: 22.66%;
    background: #e06c51; }
#pikachu:before {
    left: 0; }
#pikachu:after {
    right: 0; }
#pikachu:before, #pikachu:after {
    position: absolute;
    top: 51.56%; }
#pikachu > div:nth-child(1) {
    position: absolute;
    top: 23.44%;
    width: 16.8%;
    height: 19.53%;
    background: #1a1312; }
#pikachu > div:nth-child(1):before {
    position: absolute;
    top: 6%;
    width: 41.86%;
    height: 36%;
    background: white; }
#pikachu > div:nth-child(1):after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: #3a322a; }
#pikachu > div:nth-child(2) {
    position: absolute;
    top: 23.44%;
    width: 16.8%;
    height: 19.53%;
    background: #1a1312; }
#pikachu > div:nth-child(2):before {
    position: absolute;
    top: 6%;
    width: 41.86%;
    height: 36%;
    background: white; }
#pikachu > div:nth-child(2):after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: #3a322a; }
#pikachu > div:nth-child(1) {
    left: 16.41%; }
#pikachu > div:nth-child(2) {
    right: 16.41%; }
#pikachu > div:nth-child(1):before {
    left: 37.21%; }
#pikachu > div:nth-child(2):before {
    right: 37.21%; }
#pikachu > div:nth-child(3) {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
#pikachu > div:nth-child(3):after {
    position: absolute;
    top: 44.53%;
    left: 46.485%;
    width: 7.03%;
    height: 3.91%;
    background: #1a1312; }
#pikachu > div:nth-child(3) div {
    position: absolute;
    top: 50.78%;
    left: 31.25%;
    width: 37.5%;
    height: 26.56%;
    background: #96606d;
    padding: 17.58% 5.08% 0;
    clip-path: polygon(50% 0, 64.58% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%, 35.42% 25%); }
#pikachu > div:nth-child(3) div:before {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d49ab3; }

运行效果：
\"请添加图片描述\"

2.雷丘

\"在这里插入图片描述\"
raichu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>raichu</title>
    <link rel="stylesheet" href="raichu.css">
</head>
<body>

<div class='pokemon'>
    <div class='electric' id='raichu'>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

raichu.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#raichu {
    background: #f4c85a; }
#raichu:before, #raichu:after {
    width: 22.27%;
    height: 26.95%;
    background: #fee986; }
#raichu:before {
    left: 0; }
#raichu:after {
    right: 0; }
#raichu:before, #raichu:after {
    position: absolute;
    top: 50%; }
#raichu > div:nth-child(1) {
    position: absolute;
    top: 23.44%;
    width: 16.41%;
    height: 20.31%;
    background: #1c0f0c; }
#raichu > div:nth-child(1):before {
    position: absolute;
    top: 5.77%;
    width: 42.86%;
    height: 32.69%;
    background: white; }
#raichu > div:nth-child(1):after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 21.43%;
    background: #4e3d34; }
#raichu > div:nth-child(2) {
    position: absolute;
    top: 23.44%;
    width: 16.41%;
    height: 20.31%;
    background: #1c0f0c; }
#raichu > div:nth-child(2):before {
    position: absolute;
    top: 5.77%;
    width: 42.86%;
    height: 32.69%;
    background: white; }
#raichu > div:nth-child(2):after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 21.43%;
    background: #4e3d34; }
#raichu > div:nth-child(1) {
    left: 16.8%; }
#raichu > div:nth-child(2) {
    right: 16.8%; }
#raichu > div:nth-child(1):before {
    left: 35.71%; }
#raichu > div:nth-child(2):before {
    right: 35.71%; }
#raichu > div:nth-child(3) {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
#raichu > div:nth-child(3):after {
    position: absolute;
    top: 44.14%;
    left: 45.705%;
    width: 8.59%;
    height: 5.08%;
    background: #302a24; }
#raichu > div:nth-child(3) div {
    position: absolute;
    top: 51.56%;
    left: 30.86%;
    width: 38.28%;
    height: 20.7%;
    background: #96606d;
    padding: 12.5% 7.03% 0;
    clip-path: polygon(50% 0, 63.27% 24.53%, 100% 24.53%, 100% 100%, 0 100%, 0 24.53%, 36.73% 24.53%); }
#raichu > div:nth-child(3) div:before {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d49ab3; }

运行效果：
\"请添加图片描述\"

二、妙蛙种子

1.妙蛙种子

\"在这里插入图片描述\"
bulbasaur.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bulbasaur</title>
    <link rel="stylesheet" href="bulbasaur.css">
</head>
<body>

<div class='pokemon'>
    <div class='grass poison' id='bulbasaur'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

bulbasaur.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }



#bulbasaur {
    background: #78d9ad; }
#bulbasaur:before {
    position: relative;
    width: 62.5%;
    margin-left: auto;
    margin-right: auto;
    height: 9.38%;
    background: linear-gradient(to right, #75b87e 43.75%, #639868 43.75%, #639868 56.25%, #75b87e 56.25%);
    clip-path: polygon(0 0, 100% 0, 94.38% 100%, 5.63% 100%); }
#bulbasaur:after {
    position: absolute;
    top: 56.25%;
    left: 45%;
    width: 10%;
    height: 4%;
    background: linear-gradient(to right, #5aaa84 16%, transparent 16%, transparent 84%, #5aaa84 84%); }
#bulbasaur > div:nth-child(1) {
    position: absolute;
    top: 9.38%;
    left: 50%;
    width: 21.09%;
    height: 10.16%;
    background: #3c8a5d; }
#bulbasaur > div:nth-child(1):before {
    position: absolute;
    top: 84.62%;
    left: -66.67%;
    width: 33.33%;
    height: 69.23%;
    background: #3c8a5d; }
#bulbasaur > div:nth-child(1):after {
    position: absolute;
    top: 200%;
    left: -11.11%;
    width: 48.15%;
    height: 100%;
    background: #3c8a5d; }
#bulbasaur > div:nth-child(2) {
    position: absolute;
    top: 31.25%;
    width: 24.61%;
    height: 25.39%;
    background: #EFEFEF;
    padding-top: 2.34%; }
#bulbasaur > div:nth-child(2):before {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#bd414f 73.33%, #d6616d 73.33%); }
#bulbasaur > div:nth-child(2):after {
    position: absolute;
    top: 32.31%;
    width: 23.81%;
    height: 47.69%;
    background: #EFEFEF; }
#bulbasaur > div:nth-child(3) {
    position: absolute;
    top: 31.25%;
    width: 24.61%;
    height: 25.39%;
    background: #EFEFEF;
    padding-top: 2.34%; }
#bulbasaur > div:nth-child(3):before {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#bd414f 73.33%, #d6616d 73.33%); }
#bulbasaur > div:nth-child(3):after {
    position: absolute;
    top: 32.31%;
    width: 23.81%;
    height: 47.69%;
    background: #EFEFEF; }
#bulbasaur > div:nth-child(2) {
    left: 8%; }
#bulbasaur > div:nth-child(3) {
    right: 8%; }
#bulbasaur > div:nth-child(2) {
    padding-left: 6.25%; }
#bulbasaur > div:nth-child(3) {
    padding-right: 6.25%; }
#bulbasaur > div:nth-child(2) {
    clip-path: polygon(0 0, 77.78% 0, 100% 100%, 0 100%); }
#bulbasaur > div:nth-child(3) {
    clip-path: polygon(22.22% 0, 100% 0, 100% 100%, 0 100%); }
#bulbasaur > div:nth-child(2):after {
    left: 49.21%; }
#bulbasaur > div:nth-child(3):after {
    right: 49.21%; }
#bulbasaur > div:nth-child(4) {
    position: absolute;
    top: 62.5%;
    left: 12.89%;
    width: 74.22%;
    height: 15.63%;
    background: #944368;
    padding: 7.81% 8.98% 0; }
#bulbasaur > div:nth-child(4):before {
    position: absolute;
    top: 0;
    left: 6.315%;
    width: 87.37%;
    height: 35%;
    background: linear-gradient(to right, #EFEFEF 11.45%, transparent 11.45%, transparent 88.55%, #EFEFEF 88.55%); }
#bulbasaur > div:nth-child(4):after {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ce779f; }

运行效果：
\"请添加图片描述\"

2.妙蛙草

\"在这里插入图片描述\"
ivysaur.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ivysaur</title>
    <link rel="stylesheet" href="ivysaur.css">
</head>
<body>

<div class='pokemon'>
    <div class='grass poison' id='ivysaur'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

ivysaur.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#ivysaur {
    background: #81bbc6; }
#ivysaur:before {
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    height: 11.5%;
    background: #d87289;
    clip-path: polygon(0 0, 100% 0, 89.5% 100%, 10.5% 100%); }
#ivysaur:after {
    position: absolute;
    top: 0;
    left: 25.78%;
    width: 48.44%;
    height: 11.5%;
    background: #6ba470; }
#ivysaur > div:nth-child(1) {
    position: absolute;
    top: 11.5%;
    left: 40.63%;
    width: 31.25%;
    height: 19.92%;
    z-index: 2; }
#ivysaur > div:nth-child(1):before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #317d94;
    clip-path: polygon(0 0, 100% 0, 63.75% 100%, 36.25% 100%); }
#ivysaur > div:nth-child(1):after {
    position: absolute;
    top: 84.31%;
    left: -20%;
    width: 30%;
    height: 43.14%;
    background: #317d94;
    clip-path: polygon(0 0, 100% 0, 71% 100%, 29% 100%); }
#ivysaur > div:nth-child(2) {
    position: absolute;
    top: 33.2%;
    left: 21.485%;
    width: 57.03%;
    height: 31.64%;
    background: #81bbc6;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%); }
#ivysaur > div:nth-child(2):before, #ivysaur > div:nth-child(2):after {
    width: 3.42%;
    height: 12.35%;
    background: #6b9aa5; }
#ivysaur > div:nth-child(2):before {
    left: 40.41%; }
#ivysaur > div:nth-child(2):after {
    right: 40.41%; }
#ivysaur > div:nth-child(2):before, #ivysaur > div:nth-child(2):after {
    position: absolute;
    top: 76.54%; }
#ivysaur > div:nth-child(3) {
    position: absolute;
    top: 33.59%;
    width: 27.34%;
    height: 20.31%;
    background: white;
    z-index: 0; }
#ivysaur > div:nth-child(3):before {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#c64552 69.23%, #e14e5a 69.23%); }
#ivysaur > div:nth-child(3):after {
    position: absolute;
    top: 0;
    width: 21.43%;
    height: 82.69%;
    background: #3c292b; }
#ivysaur > div:nth-child(4) {
    position: absolute;
    top: 33.59%;
    width: 27.34%;
    height: 20.31%;
    background: white;
    z-index: 0; }
#ivysaur > div:nth-child(4):before {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#c64552 69.23%, #e14e5a 69.23%); }
#ivysaur > div:nth-child(4):after {
    position: absolute;
    top: 0;
    width: 21.43%;
    height: 82.69%;
    background: #3c292b; }
#ivysaur > div:nth-child(3) {
    left: 6.25%; }
#ivysaur > div:nth-child(4) {
    right: 6.25%; }
#ivysaur > div:nth-child(3) {
    padding-left: 7.81%; }
#ivysaur > div:nth-child(4) {
    padding-right: 7.81%; }
#ivysaur > div:nth-child(3):after {
    left: 55.71%; }
#ivysaur > div:nth-child(4):after {
    right: 55.71%; }
#ivysaur > div:nth-child(5) {
    position: absolute;
    top: 60.55%;
    left: 9.96%;
    width: 80.08%;
    height: 16.41%;
    background: #944368;
    padding: 9.38% 10.55% 0; }
#ivysaur > div:nth-child(5):before {
    position: absolute;
    top: 0;
    left: 7.075%;
    width: 85.85%;
    height: 42.86%;
    background: linear-gradient(to right, #EFEFEF 13.64%, transparent 13.64%, transparent 86.36%, #EFEFEF 86.36%); }
#ivysaur > div:nth-child(5):after {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ce779f; }

运行效果：
\"请添加图片描述\"

3.妙蛙花

\"在这里插入图片描述\"

venusaur.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>venusaur</title>
    <link rel="stylesheet" href="venusaur.css">
</head>
<body>

<div class='pokemon'>
    <div class='grass poison' id='venusaur'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

venusaur,css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#venusaur {
    background: #8cc7c3; }
#venusaur:before, #venusaur:after {
    width: 2.73%;
    height: 2.73%;
    background: #6b9a99; }
#venusaur:before {
    left: 42.97%; }
#venusaur:after {
    right: 42.97%; }
#venusaur:before, #venusaur:after {
    position: absolute;
    top: 67.97%; }
#venusaur > div:nth-child(1) {
    position: relative;
    width: 100%;
    height: 25%;
    background: #e1808e; }
#venusaur > div:nth-child(1):before {
    position: absolute;
    left: 9.38%;
    width: 5.47%;
    height: 21.88%;
    background: #f4d3d3; }
#venusaur > div:nth-child(1):after {
    position: absolute;
    top: 32.81%;
    left: 17.19%;
    width: 7.81%;
    height: 31.25%;
    background: #f4d3d3; }
#venusaur > div:nth-child(1) div {
    position: absolute;
    right: 11.72%;
    width: 10.94%;
    height: 43.75%;
    background: #f4d3d3; }
#venusaur > div:nth-child(2) {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
#venusaur > div:nth-child(2):before {
    position: absolute;
    top: 0;
    left: 28.9%;
    width: 42.2%;
    height: 21.95%;
    background: linear-gradient(#8A7150 26.79%, #796249 26.79%, #796249 66.07%, #8A7150 66.07%); }
#venusaur > div:nth-child(2) div {
    position: absolute;
    top: 25.05%;
    width: 100%;
    height: 7.81%;
    background: #81a884; }
#venusaur > div:nth-child(2) div:before {
    position: absolute;
    left: 25.4%;
    width: 49.2%;
    height: 310%;
    background: #81a884;
    clip-path: polygon(0 0, 100% 0, 100% 83.87%, 93% 100%, 7% 100%, 0 83.87%); }
#venusaur > div:nth-child(3):before {
    position: absolute;
    top: 21.95%;
    left: 22.7%;
    width: 54.6%;
    height: 3.1%;
    background: #759a78; }
#venusaur > div:nth-child(3):after {
    position: absolute;
    top: 21.95%;
    left: 47.7%;
    width: 4.6%;
    height: 19.53%;
    background: #759a78; }
#venusaur > div:nth-child(4) {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between; }
#venusaur > div:nth-child(4):before, #venusaur > div:nth-child(4):after {
    width: 15.63%;
    height: 18.4%;
    background: #8cc7c3; }
#venusaur > div:nth-child(4):before, #venusaur > div:nth-child(4):after {
    position: relative;
    top: 14.8%; }
#venusaur > div:nth-child(4):before, #venusaur > div:nth-child(4):after {
    clip-path: polygon(72.5% 0, 82.5% 12.77%, 100% 100%, 0 100%, 0 0); }
#venusaur > div:nth-child(4):after {
    transform: rotateY(0.5turn); }
#venusaur > div:nth-child(4) div {
    position: absolute;
    top: 17.97%;
    width: 100%;
    height: 14.84%;
    z-index: 1;
    display: flex;
    justify-content: space-between; }
#venusaur > div:nth-child(4) div:before, #venusaur > div:nth-child(4) div:after {
    width: 10.16%;
    height: 100%;
    background: #bd5f6d; }
#venusaur > div:nth-child(4) div:before, #venusaur > div:nth-child(4) div:after {
    position: relative;
    top: 0; }
#venusaur > div:nth-child(4) div:before, #venusaur > div:nth-child(4) div:after {
    clip-path: polygon(84.62% 0, 100% 10.53%, 100% 100%, 0 100%, 0 0); }
#venusaur > div:nth-child(4) div:after {
    transform: rotateY(0.5turn); }
#venusaur > div:nth-child(5) {
    position: absolute;
    top: 45%;
    width: 19.14%;
    height: 19.14%;
    background: white;
    padding: 0 4.3% 3.13%;
    overflow: hidden; }
#venusaur > div:nth-child(5) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #c65563; }
#venusaur > div:nth-child(5) div:before {
    position: absolute;
    left: 32.14%;
    width: 35.72%;
    height: 78.05%;
    background: white; }
#venusaur > div:nth-child(5) div:after {
    position: absolute;
    bottom: 0;
    width: 75%;
    height: 21.95%;
    background: #db5e6d; }
#venusaur > div:nth-child(5):after {
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    background: #86c0bd; }
#venusaur > div:nth-child(6) {
    position: absolute;
    top: 45%;
    width: 19.14%;
    height: 19.14%;
    background: white;
    padding: 0 4.3% 3.13%;
    overflow: hidden; }
#venusaur > div:nth-child(6) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #c65563; }
#venusaur > div:nth-child(6) div:before {
    position: absolute;
    left: 32.14%;
    width: 35.72%;
    height: 78.05%;
    background: white; }
#venusaur > div:nth-child(6) div:after {
    position: absolute;
    bottom: 0;
    width: 75%;
    height: 21.95%;
    background: #db5e6d; }
#venusaur > div:nth-child(6):after {
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    background: #86c0bd; }
#venusaur > div:nth-child(5) {
    left: 5.47%; }
#venusaur > div:nth-child(6) {
    right: 5.47%; }
#venusaur > div:nth-child(5) div:after {
    left: 0; }
#venusaur > div:nth-child(6) div:after {
    right: 0; }
#venusaur > div:nth-child(5):after {
    clip-path: polygon(0 0, 100% 0, 100% 73.47%, 0 30.61%); }
#venusaur > div:nth-child(6):after {
    clip-path: polygon(0 0, 100% 0, 100% 30.61%, 0 73.47%); }
#venusaur > div:nth-child(7) {
    position: absolute;
    top: 69.14%;
    width: 100%;
    height: 16.8%;
    background: #864244;
    clip-path: polygon(0 0, 37.5% 0, 39.84% 23.26%, 60.16% 23.26%, 62.5% 0, 100% 0, 100% 100%, 0 100%); }
#venusaur > div:nth-child(7):before, #venusaur > div:nth-child(7):after {
    width: 7.03%;
    height: 39.53%;
    background: white; }
#venusaur > div:nth-child(7):before {
    left: 4.69%; }
#venusaur > div:nth-child(7):after {
    right: 4.69%; }
#venusaur > div:nth-child(7):before, #venusaur > div:nth-child(7):after {
    position: absolute;
    top: 0; }
#venusaur > div:nth-child(7) div {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 41.86%;
    background: #9c7b94; }
#venusaur > div:nth-child(7) div:before, #venusaur > div:nth-child(7) div:after {
    width: 16.41%;
    height: 61.11%;
    background: linear-gradient(to right, white 38.1%, #9c7b94 38.1%, #9c7b94 61.9%, white 61.9%); }
#venusaur > div:nth-child(7) div:before {
    left: 7.81%; }
#venusaur > div:nth-child(7) div:after {
    right: 7.81%; }
#venusaur > div:nth-child(7) div:before, #venusaur > div:nth-child(7) div:after {
    position: absolute;
    bottom: 0; }

运行效果：
\"请添加图片描述\"

三、小火龙

1.小火龙

\"在这里插入图片描述\"

charmander.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>charmander</title>
    <link rel="stylesheet" href="charmander.css">
</head>
<body>

<div class='pokemon'>
    <div class='fire' id='charmander'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

charmander.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#charmander {
    background: #efaf84; }
#charmander:before, #charmander:after {
    width: 3.13%;
    height: 6.25%;
    background: #d39873; }
#charmander:before {
    left: 42.97%; }
#charmander:after {
    right: 42.97%; }
#charmander:before, #charmander:after {
    position: absolute;
    top: 55.08%; }
#charmander > div:nth-child(1) {
    position: absolute;
    top: 12.89%;
    width: 21.88%;
    height: 33.2%;
    background: #1e2c31;
    padding: 7.42% 6.25% 5.47%; }
#charmander > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #182226; }
#charmander > div:nth-child(1):before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 27.06%;
    background: #396d7e; }
#charmander > div:nth-child(1):after {
    position: absolute;
    top: 4.71%;
    width: 37.5%;
    height: 37.65%;
    background: white; }
#charmander > div:nth-child(2) {
    position: absolute;
    top: 12.89%;
    width: 21.88%;
    height: 33.2%;
    background: #1e2c31;
    padding: 7.42% 6.25% 5.47%; }
#charmander > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #182226; }
#charmander > div:nth-child(2):before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 27.06%;
    background: #396d7e; }
#charmander > div:nth-child(2):after {
    position: absolute;
    top: 4.71%;
    width: 37.5%;
    height: 37.65%;
    background: white; }
#charmander > div:nth-child(1) {
    left: 9%; }
#charmander > div:nth-child(2) {
    right: 9%; }
#charmander > div:nth-child(2):after {
    left: 12.5%; }
#charmander > div:nth-child(1):after {
    right: 12.5%; }
#charmander > div:nth-child(3) {
    position: absolute;
    top: 64.45%;
    left: 11%;
    width: 78%;
    height: 24.22%;
    background: #a26f8e;
    padding: 11.33% 8.2% 0; }
#charmander > div:nth-child(3):before, #charmander > div:nth-child(3):after {
    width: 10.5%;
    height: 32.26%;
    background: white; }
#charmander > div:nth-child(3):before {
    left: 7%; }
#charmander > div:nth-child(3):after {
    right: 7%; }
#charmander > div:nth-child(3):before, #charmander > div:nth-child(3):after {
    position: absolute;
    top: 0; }
#charmander > div:nth-child(3) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #cb98c0; }
#charmander > div:nth-child(3) div:before, #charmander > div:nth-child(3) div:after {
    width: 11.25%;
    height: 48.48%;
    background: white; }
#charmander > div:nth-child(3) div:before {
    left: 6.25%; }
#charmander > div:nth-child(3) div:after {
    right: 6.25%; }
#charmander > div:nth-child(3) div:before, #charmander > div:nth-child(3) div:after {
    position: absolute;
    bottom: 0; }

运行效果：
\"请添加图片描述\"

2.火恐龙

\"在这里插入图片描述\"
charmeleon.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>charmeleon</title>
    <link rel="stylesheet" href="charmeleon.css">
</head>
<body>

<div class='pokemon'>
    <div class='fire' id='charmeleon'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

charmeleon.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#charmeleon {
    background: #ef8b78; }
#charmeleon:before {
    position: absolute;
    top: 29.69%;
    left: 42.185%;
    width: 15.63%;
    height: 12.5%;
    background: linear-gradient(to right, #d67d6b 10%, transparent 10%, transparent 90%, #d67d6b 90%); }
#charmeleon:after {
    position: absolute;
    top: 57.03%;
    left: 43.36%;
    width: 13.28%;
    height: 5.47%;
    background: linear-gradient(to right, #d67d6b 17.65%, transparent 17.65%, transparent 82.35%, #d67d6b 82.35%); }
#charmeleon > div:nth-child(1) {
    position: absolute;
    top: 18.36%;
    width: 26.95%;
    height: 23.83%;
    background: white; }
#charmeleon > div:nth-child(1):before {
    position: absolute;
    width: 15.94%;
    height: 68.85%;
    background: white;
    z-index: 1; }
#charmeleon > div:nth-child(1):after {
    position: absolute;
    top: 0;
    width: 24.64%;
    height: 88.52%;
    background: #231a1e; }
#charmeleon > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #3c5668; }
#charmeleon > div:nth-child(1) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 16.39%;
    background: #47657b; }
#charmeleon > div:nth-child(2) {
    position: absolute;
    top: 18.36%;
    width: 26.95%;
    height: 23.83%;
    background: white; }
#charmeleon > div:nth-child(2):before {
    position: absolute;
    width: 15.94%;
    height: 68.85%;
    background: white;
    z-index: 1; }
#charmeleon > div:nth-child(2):after {
    position: absolute;
    top: 0;
    width: 24.64%;
    height: 88.52%;
    background: #231a1e; }
#charmeleon > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #3c5668; }
#charmeleon > div:nth-child(2) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 16.39%;
    background: #47657b; }
#charmeleon > div:nth-child(1) {
    left: 8.59%; }
#charmeleon > div:nth-child(2) {
    right: 8.59%; }
#charmeleon > div:nth-child(1) {
    clip-path: polygon(0 0, 100% 100%, 0 100%); }
#charmeleon > div:nth-child(2) {
    clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#charmeleon > div:nth-child(1) {
    padding-left: 7.81%; }
#charmeleon > div:nth-child(2) {
    padding-right: 7.81%; }
#charmeleon > div:nth-child(1):before {
    left: 39.13%; }
#charmeleon > div:nth-child(2):before {
    right: 39.13%; }
#charmeleon > div:nth-child(1):after {
    left: 49.28%; }
#charmeleon > div:nth-child(2):after {
    right: 49.28%; }
#charmeleon > div:nth-child(3) {
    position: absolute;
    top: 61.33%;
    left: 7.42%;
    width: 85.16%;
    height: 23.44%;
    background: #a26f8e;
    padding: 11.72% 8.6% 0;
    clip-path: polygon(37.61% 25.42%, 62.39% 25.42%, 65.14% 0, 100% 0, 100% 100%, 0 100%, 0 0, 34.86% 0); }
#charmeleon > div:nth-child(3):before, #charmeleon > div:nth-child(3):after {
    width: 10.1%;
    height: 31.67%;
    background: white; }
#charmeleon > div:nth-child(3):before {
    left: 5.5%; }
#charmeleon > div:nth-child(3):after {
    right: 5.5%; }
#charmeleon > div:nth-child(3):before, #charmeleon > div:nth-child(3):after {
    position: absolute;
    top: 0; }
#charmeleon > div:nth-child(3) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #cb98c0; }
#charmeleon > div:nth-child(3) div:before, #charmeleon > div:nth-child(3) div:after {
    width: 8.57%;
    height: 50%;
    background: white; }
#charmeleon > div:nth-child(3) div:before {
    left: 8.57%; }
#charmeleon > div:nth-child(3) div:after {
    right: 8.57%; }
#charmeleon > div:nth-child(3) div:before, #charmeleon > div:nth-child(3) div:after {
    position: absolute;
    bottom: 0; }

运行效果：
\"请添加图片描述\"

3.喷火龙

\"在这里插入图片描述\"

charizard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>charizard</title>
    <link rel="stylesheet" href="charizard.css">
</head>
<body>

<div class='pokemon'>
    <div class='fire flying' id='charizard'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

charizard.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#charizard {
    background: linear-gradient(to bottom, #f1633c 9.77%, #f4af63 9.77%); }
#charizard:before, #charizard:after {
    width: 22.27%;
    height: 9.87%;
    background: #f9b365; }
#charizard:before {
    left: 11.33%; }
#charizard:after {
    right: 11.33%; }
#charizard:before, #charizard:after {
    position: absolute;
    top: 0; }
#charizard > div:nth-child(1) {
    position: absolute;
    top: 25.39%;
    width: 26.95%;
    height: 18.36%;
    background: white; }
#charizard > div:nth-child(1):before {
    position: absolute;
    width: 21.74%;
    height: 63.83%;
    background: white;
    z-index: 1; }
#charizard > div:nth-child(1):after {
    position: absolute;
    top: 0;
    width: 21.74%;
    height: 87.23%;
    background: #1e2a2e; }
#charizard > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #2b3c42; }
#charizard > div:nth-child(1) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 21.28%;
    background: #3c565d; }
#charizard > div:nth-child(2) {
    position: absolute;
    top: 25.39%;
    width: 26.95%;
    height: 18.36%;
    background: white; }
#charizard > div:nth-child(2):before {
    position: absolute;
    width: 21.74%;
    height: 63.83%;
    background: white;
    z-index: 1; }
#charizard > div:nth-child(2):after {
    position: absolute;
    top: 0;
    width: 21.74%;
    height: 87.23%;
    background: #1e2a2e; }
#charizard > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #2b3c42; }
#charizard > div:nth-child(2) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 21.28%;
    background: #3c565d; }
#charizard > div:nth-child(1) {
    left: 8.6%; }
#charizard > div:nth-child(2) {
    right: 8.6%; }
#charizard > div:nth-child(1) {
    clip-path: polygon(0 0, 100% 100%, 0 100%); }
#charizard > div:nth-child(2) {
    clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#charizard > div:nth-child(1) {
    padding-left: 7.81%; }
#charizard > div:nth-child(2) {
    padding-right: 7.81%; }
#charizard > div:nth-child(2) {
    padding-left: 3.91%; }
#charizard > div:nth-child(1) {
    padding-right: 3.91%; }
#charizard > div:nth-child(1):before {
    left: 44.93%; }
#charizard > div:nth-child(2):before {
    right: 44.93%; }
#charizard > div:nth-child(1):after {
    left: 44.93%; }
#charizard > div:nth-child(2):after {
    right: 44.93%; }
#charizard > div:nth-child(3) {
    position: absolute;
    top: 30.08%;
    left: 35.55%;
    width: 28.9%;
    height: 19.53%;
    display: flex;
    justify-content: space-between; }
#charizard > div:nth-child(3):before, #charizard > div:nth-child(3):after {
    width: 9.46%;
    height: 70%;
    background: #e7a660; }
#charizard > div:nth-child(3):before, #charizard > div:nth-child(3):after {
    position: relative;
    top: 0; }
#charizard > div:nth-child(3) div {
    position: absolute;
    left: 23%;
    bottom: 0;
    width: 54%;
    height: 30%;
    display: flex;
    justify-content: space-between; }
#charizard > div:nth-child(3) div:before, #charizard > div:nth-child(3) div:after {
    width: 15%;
    height: 100%;
    background: #d09454; }
#charizard > div:nth-child(3) div:before, #charizard > div:nth-child(3) div:after {
    position: relative;
    top: 0; }
#charizard > div:nth-child(4) {
    position: absolute;
    top: 62.5%;
    left: 5.86%;
    width: 88.28%;
    height: 24.22%;
    background: #a77191;
    padding: 13.67% 7.81% 0; }
#charizard > div:nth-child(4):before, #charizard > div:nth-child(4):after {
    width: 11.5%;
    height: 40.32%;
    background: white; }
#charizard > div:nth-child(4):before {
    left: 4.42%; }
#charizard > div:nth-child(4):after {
    right: 4.42%; }
#charizard > div:nth-child(4):before, #charizard > div:nth-child(4):after {
    position: absolute;
    top: 0; }
#charizard > div:nth-child(4) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #cb98c0; }
#charizard > div:nth-child(4) div:before, #charizard > div:nth-child(4) div:after {
    width: 11.29%;
    height: 55.56%;
    background: white; }
#charizard > div:nth-child(4) div:before {
    left: 6%; }
#charizard > div:nth-child(4) div:after {
    right: 6%; }
#charizard > div:nth-child(4) div:before, #charizard > div:nth-child(4) div:after {
    position: absolute;
    bottom: 0; }

运行效果：
\"请添加图片描述\"

四、杰尼龟

1.杰尼龟

\"在这里插入图片描述\"

squirtle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>squirtle</title>
    <link rel="stylesheet" href="squirtle.css">
</head>
<body>

<div class='pokemon'>
    <div class='water' id='squirtle'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div></div>
    </div>
</div>

</body>
</html>

squirtle.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#squirtle {
    background: #84c5d6; }
#squirtle:before, #squirtle:after {
    width: 2.73%;
    height: 3.91%;
    background: #70a7b5; }
#squirtle:before {
    left: 44.53%; }
#squirtle:after {
    right: 44.53%; }
#squirtle:before, #squirtle:after {
    position: absolute;
    top: 60.56%; }
#squirtle > div:nth-child(1) {
    position: absolute;
    top: 23.44%;
    width: 21.88%;
    height: 30.47%;
    background: white; }
#squirtle > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #331e29; }
#squirtle > div:nth-child(1) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26.92%;
    background: #91526d; }
#squirtle > div:nth-child(1):before {
    position: absolute;
    top: 5.13%;
    width: 35.71%;
    height: 24.36%;
    background: white;
    z-index: 1; }
#squirtle > div:nth-child(1):after {
    position: absolute;
    top: 5.13%;
    width: 35.71%;
    height: 79.49%;
    background: black; }
#squirtle > div:nth-child(2) {
    position: absolute;
    top: 23.44%;
    width: 21.88%;
    height: 30.47%;
    background: white; }
#squirtle > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #331e29; }
#squirtle > div:nth-child(2) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26.92%;
    background: #91526d; }
#squirtle > div:nth-child(2):before {
    position: absolute;
    top: 5.13%;
    width: 35.71%;
    height: 24.36%;
    background: white;
    z-index: 1; }
#squirtle > div:nth-child(2):after {
    position: absolute;
    top: 5.13%;
    width: 35.71%;
    height: 79.49%;
    background: black; }
#squirtle > div:nth-child(1) {
    left: 7.81%; }
#squirtle > div:nth-child(2) {
    right: 7.81%; }
#squirtle > div:nth-child(1) {
    padding-left: 5.47%; }
#squirtle > div:nth-child(2) {
    padding-right: 5.47%; }
#squirtle > div:nth-child(1):before {
    left: 44.64%; }
#squirtle > div:nth-child(2):before {
    right: 44.64%; }
#squirtle > div:nth-child(1):after {
    left: 44.64%; }
#squirtle > div:nth-child(2):after {
    right: 44.64%; }
#squirtle > div:nth-child(3) {
    position: absolute;
    top: 64.45%;
    left: 6.64%;
    width: 86.72%;
    height: 15.23%;
    background: #994b78;
    clip-path: polygon(44.14% 30.77%, 55.86% 30.77%, 63.96% 0, 100% 0, 100% 100%, 0 100%, 0 0, 36.04% 0);
    padding: 7.42% 9% 0; }
#squirtle > div:nth-child(3):before {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d084ad; }

运行效果：
\"请添加图片描述\"

2.卡咪龟

\"在这里插入图片描述\"
wartortle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wartortle</title>
    <link rel="stylesheet" href="wartortle.css">
</head>
<body>

<div class='pokemon'>
    <div class='water' id='wartortle'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

wartortle.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#wartortle {
    background: #75a4db; }
#wartortle:before {
    position: absolute;
    top: 51.17%;
    width: 100%;
    height: 5.86%;
    background: linear-gradient(to right, #6892c3 14.06%, transparent 14.06%, transparent 85.94%, #6892c3 85.94%); }
#wartortle:after {
    position: absolute;
    top: 61.33%;
    left: 45.31%;
    width: 9.38%;
    height: 4.3%;
    background: linear-gradient(to right, #6590c0 25%, transparent 25%, transparent 75%, #6590c0 75%); }
#wartortle > div:nth-child(1) {
    position: absolute;
    top: 25.78%;
    width: 26.56%;
    height: 31.25%;
    background: white; }
#wartortle > div:nth-child(1):before {
    position: absolute;
    top: 5%;
    width: 52.94%;
    height: 22.5%;
    background: white;
    z-index: 1; }
#wartortle > div:nth-child(1):after {
    position: absolute;
    top: 16.25%;
    width: 26.47%;
    height: 65%;
    background: #261915; }
#wartortle > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #70473f; }
#wartortle > div:nth-child(1) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 27.5%;
    background: #7e4f47; }
#wartortle > div:nth-child(2) {
    position: absolute;
    top: 25.78%;
    width: 26.56%;
    height: 31.25%;
    background: white; }
#wartortle > div:nth-child(2):before {
    position: absolute;
    top: 5%;
    width: 52.94%;
    height: 22.5%;
    background: white;
    z-index: 1; }
#wartortle > div:nth-child(2):after {
    position: absolute;
    top: 16.25%;
    width: 26.47%;
    height: 65%;
    background: #261915; }
#wartortle > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #70473f; }
#wartortle > div:nth-child(2) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 27.5%;
    background: #7e4f47; }
#wartortle > div:nth-child(1) {
    left: 8.2%; }
#wartortle > div:nth-child(2) {
    right: 8.2%; }
#wartortle > div:nth-child(1) {
    padding-left: 8.2%; }
#wartortle > div:nth-child(2) {
    padding-right: 8.2%; }
#wartortle > div:nth-child(1) {
    clip-path: polygon(0 0, 69.12% 0, 100% 100%, 0 100%); }
#wartortle > div:nth-child(2) {
    clip-path: polygon(30.88% 0, 100% 0, 100% 100%, 0 100%); }
#wartortle > div:nth-child(1):before {
    left: 47%; }
#wartortle > div:nth-child(2):before {
    right: 47%; }
#wartortle > div:nth-child(1):after {
    left: 57.35%; }
#wartortle > div:nth-child(2):after {
    right: 57.35%; }
#wartortle > div:nth-child(3) {
    position: absolute;
    top: 66.41%;
    left: 10.935%;
    width: 78.13%;
    height: 13.67%;
    background: #994b78;
    clip-path: polygon(43% 28.57%, 57% 28.57%, 61% 0, 100% 0, 100% 100%, 0 100%, 0 0, 39% 0);
    padding: 6.64% 12.89% 0; }
#wartortle > div:nth-child(3):before {
    position: absolute;
    top: 0;
    left: 3.5%;
    width: 93%;
    height: 48.57%;
    background: linear-gradient(to right, white 9.68%, transparent 9.68%, transparent 90.32%, white 90.32%); }
#wartortle > div:nth-child(3):after {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d084ad; }
#wartortle > div:nth-child(4) {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 9.77%;
    background: #e1d1af;
    padding: 0 20%; }
#wartortle > div:nth-child(4):before {
    position: relative;
    width: 100%;
    height: 102%;
    background: #546165;
    clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); }

运行效果：
\"请添加图片描述\"

3.水箭龟

\"在这里插入图片描述\"
blastoise.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blastoise</title>
    <link rel="stylesheet" href="blastoise.css">
</head>
<body>

<div class='pokemon'>
    <div class='water' id='blastoise'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

blastoise.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#blastoise {
    background: #94b7e1; }
#blastoise:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%;
    background: #e1d1af; }
#blastoise:after {
    position: relative;
    width: 51.56%;
    margin-left: auto;
    margin-right: auto;
    height: 8.2%;
    background: #a58b6d;
    clip-path: polygon(0 0, 100% 0, 96.2% 100%, 3.8% 100%); }
#blastoise > div:nth-child(1) {
    position: absolute;
    top: 22.66%;
    width: 29.3%;
    height: 21.48%;
    background: white; }
#blastoise > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #635142; }
#blastoise > div:nth-child(1) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 16.36%;
    background: #7b6552; }
#blastoise > div:nth-child(1):before {
    position: absolute;
    width: 12%;
    height: 63.64%;
    background: white;
    z-index: 1; }
#blastoise > div:nth-child(1):after {
    position: absolute;
    top: 0;
    width: 16%;
    height: 90.91%;
    background: #312921; }
#blastoise > div:nth-child(2) {
    position: absolute;
    top: 22.66%;
    width: 29.3%;
    height: 21.48%;
    background: white; }
#blastoise > div:nth-child(2) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #635142; }
#blastoise > div:nth-child(2) div:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 16.36%;
    background: #7b6552; }
#blastoise > div:nth-child(2):before {
    position: absolute;
    width: 12%;
    height: 63.64%;
    background: white;
    z-index: 1; }
#blastoise > div:nth-child(2):after {
    position: absolute;
    top: 0;
    width: 16%;
    height: 90.91%;
    background: #312921; }
#blastoise > div:nth-child(1) {
    left: 7.81%; }
#blastoise > div:nth-child(2) {
    right: 7.81%; }
#blastoise > div:nth-child(1) {
    clip-path: polygon(0 0, 100% 100%, 0 100%); }
#blastoise > div:nth-child(2) {
    clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#blastoise > div:nth-child(1) {
    padding-left: 11.72%; }
#blastoise > div:nth-child(2) {
    padding-right: 11.72%; }
#blastoise > div:nth-child(2) {
    padding-left: 6.64%; }
#blastoise > div:nth-child(1) {
    padding-right: 6.64%; }
#blastoise > div:nth-child(1):before {
    left: 45.33%; }
#blastoise > div:nth-child(2):before {
    right: 45.33%; }
#blastoise > div:nth-child(1):after {
    left: 50.67%; }
#blastoise > div:nth-child(2):after {
    right: 50.67%; }
#blastoise > div:nth-child(3) {
    position: absolute;
    top: 32.03%;
    left: 37.11%;
    width: 25.78%;
    height: 29.69%;
    display: flex;
    justify-content: space-between; }
#blastoise > div:nth-child(3):before, #blastoise > div:nth-child(3):after {
    width: 12.12%;
    height: 40.79%;
    background: #89acd3; }
#blastoise > div:nth-child(3):before, #blastoise > div:nth-child(3):after {
    position: relative;
    top: 0; }
#blastoise > div:nth-child(3) div {
    position: absolute;
    left: 8%;
    bottom: 0;
    width: 84%;
    height: 7.89%;
    background: #84a4c8; }
#blastoise > div:nth-child(3) div:before, #blastoise > div:nth-child(3) div:after {
    width: 23.64%;
    height: 100%;
    background: #7b9abd; }
#blastoise > div:nth-child(3) div:before {
    left: -11.82%; }
#blastoise > div:nth-child(3) div:after {
    right: -11.82%; }
#blastoise > div:nth-child(3) div:before, #blastoise > div:nth-child(3) div:after {
    position: absolute;
    top: -100%; }
#blastoise > div:nth-child(4) {
    position: absolute;
    top: 69.53%;
    left: 5.08%;
    width: 89.84%;
    height: 17.58%;
    background: #6b4b4a; }
#blastoise > div:nth-child(4):before, #blastoise > div:nth-child(4):after {
    width: 10%;
    height: 31.11%;
    background: white; }
#blastoise > div:nth-child(4):before {
    left: 11.74%; }
#blastoise > div:nth-child(4):after {
    right: 11.74%; }
#blastoise > div:nth-child(4):before, #blastoise > div:nth-child(4):after {
    position: absolute;
    top: 0; }
#blastoise > div:nth-child(4) div {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46.67%;
    background: linear-gradient(to right, transparent 12.17%, #b76b7e 12.17%, #b76b7e 87.83%, transparent 87.83%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
#blastoise > div:nth-child(4) div:before, #blastoise > div:nth-child(4) div:after {
    width: 22.17%;
    height: 52.38%; }
#blastoise > div:nth-child(4) div:before, #blastoise > div:nth-child(4) div:after {
    position: relative;
    top: 0; }
#blastoise > div:nth-child(4) div:before {
    background: linear-gradient(to right, white 29.41%, transparent 29.41%, transparent 54.9%, white 54.9%); }
#blastoise > div:nth-child(4) div:after {
    background: linear-gradient(to right, white 45.1%, transparent 45.1%, transparent 70.59%, white 70.59%); }

运行效果：
\"请添加图片描述\"

五、胖丁

1.胖丁

\"在这里插入图片描述\"
jigglypuff.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jigglypuff</title>
    <link rel="stylesheet" href="jigglypuff.css">
</head>
<body>

<div class='pokemon'>
    <div class='normal fairy' id='jigglypuff'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

jigglypuff.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#jigglypuff {
    background: #f7d7df; }
#jigglypuff:before {
    position: absolute;
    top: 58.59%;
    left: 41.405%;
    width: 17.19%;
    height: 13.28%;
    background: linear-gradient(to bottom, #8a4041 79.41%, #ee8b9a 79.41%); }
#jigglypuff > div:nth-child(1) {
    position: absolute;
    left: 27.34%;
    width: 52.34%;
    height: 23.44%; }
#jigglypuff > div:nth-child(1):before {
    position: absolute;
    width: 86.57%;
    height: 100%;
    background: #e5c4cc;
    border-radius: 0 0 5% 5% / 0 0 15% 15%; }
#jigglypuff > div:nth-child(1):after {
    position: absolute;
    right: 0;
    width: 13.43%;
    height: 45%;
    background: #e5c4cc;
    border-bottom-right-radius: 50% 25%; }
#jigglypuff > div:nth-child(1) div {
    position: absolute;
    left: 8.21%;
    width: 84.33%;
    height: 70%;
    z-index: 1; }
#jigglypuff > div:nth-child(1) div:before {
    position: absolute;
    width: 83.19%;
    height: 100%;
    background: #f7d7df;
    border-radius: 0 0 5% 5% / 0 0 15% 15%; }
#jigglypuff > div:nth-child(1) div:after {
    position: absolute;
    right: 0;
    width: 16.81%;
    height: 35.71%;
    background: #f7d7df;
    border-bottom-right-radius: 25% 50%; }
#jigglypuff > div:nth-child(2) {
    position: absolute;
    top: 29.69%;
    width: 29.69%;
    height: 30.08%;
    background: white; }
#jigglypuff > div:nth-child(2) div {
    position: absolute;
    top: 10.39%;
    width: 77.63%;
    height: 76.62%;
    background: #017c96; }
#jigglypuff > div:nth-child(2) div:before {
    position: absolute;
    top: 10.17%;
    width: 32.2%;
    height: 30.51%;
    background: white; }
#jigglypuff > div:nth-child(2) div:after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 23.73%;
    background: #01a3be; }
#jigglypuff > div:nth-child(3) {
    position: absolute;
    top: 29.69%;
    width: 29.69%;
    height: 30.08%;
    background: white; }
#jigglypuff > div:nth-child(3) div {
    position: absolute;
    top: 10.39%;
    width: 77.63%;
    height: 76.62%;
    background: #017c96; }
#jigglypuff > div:nth-child(3) div:before {
    position: absolute;
    top: 10.17%;
    width: 32.2%;
    height: 30.51%;
    background: white; }
#jigglypuff > div:nth-child(3) div:after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 23.73%;
    background: #01a3be; }
#jigglypuff > div:nth-child(2) {
    left: 7.42%; }
#jigglypuff > div:nth-child(3) {
    right: 7.42%; }
#jigglypuff > div:nth-child(2) div {
    left: 14.47%; }
#jigglypuff > div:nth-child(3) div {
    right: 14.47%; }
#jigglypuff > div:nth-child(2) div:before {
    left: 40.68%; }
#jigglypuff > div:nth-child(3) div:before {
    right: 40.68%; }

运行效果：
\"请添加图片描述\"

2.胖可丁

\"在这里插入图片描述\"
wigglytuff.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wigglytuff</title>
    <link rel="stylesheet" href="wigglytuff.css">
</head>
<body>

<div class='pokemon'>
    <div class='normal fairy' id='wigglytuff'>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>

wigglytuff.css

@charset "UTF-8";
*, *:before, *:after {
    box-sizing: border-box; }

html, body {
    min-height: 100%; }

::selection {
    background: none; }

body {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden; }

main {
    display: none; }

.pokemon {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
}


.pokemon > div {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    overflow: hidden;
    background: #f1f1f1;
    }

.pokemon > div:before, .pokemon > div:after, .pokemon > div div:before, .pokemon > div div:after {
    content: "";
    display: block; }

#wigglytuff {
    background: #fadfe3; }
#wigglytuff:before {
    position: absolute;
    bottom: 0;
    left: 14.06%;
    width: 71.88%;
    height: 54.69%;
    background: #fbf5f7; }
#wigglytuff > div:nth-child(1) {
    position: relative;
    width: 48.44%;
    margin-left: auto;
    margin-right: auto;
    height: 14.45%;
    background: #e6c5cb;
    border-radius: 0 0 5% 5% / 0 0 20% 20%;
    padding: 0 3.91% 6.64%; }
#wigglytuff > div:nth-child(1) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fadfe3;
    border-radius: 0 0 5% 5% / 0 0 20% 20%; }
#wigglytuff > div:nth-child(2) {
    position: absolute;
    top: 22.27%;
    width: 26.17%;
    height: 30.86%;
    background: white; }
#wigglytuff > div:nth-child(2) div {
    position: absolute;
    top: 12.66%;
    width: 77.61%;
    height: 73.42%;
    background: #0c7a96; }
#wigglytuff > div:nth-child(2) div:before {
    position: absolute;
    top: 5.17%;
    width: 34.62%;
    height: 27.59%;
    background: white; }
#wigglytuff > div:nth-child(2) div:after {
    position: absolute;
    bottom: 0;
    width: 69.23%;
    height: 18.97%;
    background: #6dabb6; }
#wigglytuff > div:nth-child(3) {
    position: absolute;
    top: 22.27%;
    width: 26.17%;
    height: 30.86%;
    background: white; }
#wigglytuff > div:nth-child(3) div {
    position: absolute;
    top: 12.66%;
    width: 77.61%;
    height: 73.42%;
    background: #0c7a96; }
#wigglytuff > div:nth-child(3) div:before {
    position: absolute;
    top: 5.17%;
    width: 34.62%;
    height: 27.59%;
    background: white; }
#wigglytuff > div:nth-child(3) div:after {
    position: absolute;
    bottom: 0;
    width: 69.23%;
    height: 18.97%;
    background: #6dabb6; }
#wigglytuff > div:nth-child(2) {
    left: 6.64%; }
#wigglytuff > div:nth-child(3) {
    right: 6.64%; }
#wigglytuff > div:nth-child(3) div {
    left: 0; }
#wigglytuff > div:nth-child(2) div {
    right: 0; }
#wigglytuff > div:nth-child(2) div:before {
    left: 40.38%; }
#wigglytuff > div:nth-child(3) div:before {
    right: 40.38%; }
#wigglytuff > div:nth-child(2) div:after {
    left: 17.31%; }
#wigglytuff > div:nth-child(3) div:after {
    right: 17.31%; }
#wigglytuff > div:nth-child(4) {
    position: absolute;
    top: 50%;
    left: 38.28%;
    width: 23.44%;
    height: 10.94%;
    background: #8a4041;
    padding: 3.91% 3.91% 0; }
#wigglytuff > div:nth-child(4) div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ee8b9a; }

运行效果：
\"请添加图片描述\"

总结

时间关系，先更这么多啦！如果大家喜欢，我就接着继续更。感谢支持！

相关推荐

Java打印九九乘法表代码详情

给微信小程序配一个app是怎样的体验？

Java中static修饰符的作用

ICCV 2021 的最佳论文模型 Swin Transformer 终于对视频下手了！

Android开发工程面试题

python如何获取tensor()数据类型中的值

.NET集成ORM框架HiSql

IntelliJ IDEA中如何优雅的调试Java Stream操作

vsftpd之主动模式 被动模式

机器学习（1）——常用术语

c#对象集合去重_C# 集合交、并、差、去重，对象集合交并差

springboot+vue

独立产品灵感周刊 DecoHack #20 - 如何停止来自金钱的压力

python编程初学者的良言警句_送给大数据开发初学者的良言，有兴趣的可以看看...

[报错]ufunc ‘add‘ did not contain a loop with signature matching types (dtype(‘＜U32‘), dtype(‘＜U32‘))

吃透SpringBoo的这些t知识，你就已经超过90%的Java面试者了

Springboot+webService 接口开发

【跟着大佬学JavaScript】之lodash防抖节流合并

OpenCV各模块函数使用实例(10)--运动分析和目标跟踪(Motion Analysis and Object Tracking)

opencv读取和写入视频

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号