37·灵魂前端工程师养成-[项目]JS画皮卡丘

2022-11-08 16:40:42 浏览数 (1)
  • 本项目知识储备

  • 制作鼻子和眼睛
  • 制作嘴巴
  • 制作脸颊
  • 添加动画
  • 构建项目

-曾老湿, 江湖人称曾老大。 -笔者QQ：133411023、253097001 -笔者交流群：198571640 -笔者微信：z133411023

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

本项目知识储备

1.CSS 3 布局与定位 2.CSS 3 transform 3.JS DOM 操作

浏览器JS的能力

无非两件事 1.操作DOM 2.操作AJAX

80%的JS都是在做上面的两件事

我们目前 1.用jQuery操作DOM 2.用axios操作AJAX

一个项目

60%的时间，都在写CSS 20%的时间，都在写JS 20%的时间，在想...我特么到底错在哪

找一个模仿目标

此时此刻推荐一个前端常用的网站：CODEPEN

专门给前端推荐一写好看的页面，以供模仿。

打开后搜索皮卡丘，但是得用英文，所以...查一下叫pikachu





有很多素材，我们选择一个，点进去



但是我们不看他的代码，只是借助这个页面来画。





制作鼻子和眼睛

初始化一个项目

六亲不认的先把 index.html , main.js , style.css 创建出来

然后手机页面去淘宝复制

代码语言：javascript复制
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">



index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    hello word
    <script src="main.js"></script>
</body>
</html>

运行项目

代码语言：javascript复制
MacBook-pro:pikachu-1 driverzeng$ parcel src/index.html

打开浏览器访问：http://localhost:1234



编写html制作





代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="nose"></div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth"></div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

首先我们要做鼻子，先做一个三角形，在html中鼻子div里再添加一个div

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="nose">
            <div class="san"></div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth"></div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

css做三角形

style.css

代码语言：javascript复制
.san{
    border: 1px solid red;
    width: 10px;
    height: 10px;
}



我们想把它放在皮肤的中间，所以皮肤应该是相对定位，三角形是绝对定位

style.css

代码语言：javascript复制
.skin{
    position: relative;
}
.san{
    border: 1px solid red;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -5px;
}



然后把border加粗，变成4个颜色

代码语言：javascript复制
.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red black blue green;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -5px;
}



宽和高调整为0

代码语言：javascript复制
.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red black blue green;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -5px;
}



如此一来，就能看见每一个颜色都是一个三角形，那么我们只要其中的一个红色三角形,把其他颜色变成透明的

代码语言：javascript复制
.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}



然后在三角形上画个圆，取半圆，首先在html里面添加一个div，本来应该把div放在三角形的上面，但是还得设置相对定位，所以就放在san的div里面了

index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="nose">
            <div class="san">
                <div class="yuan"></div>
            </div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth"></div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

编辑css，同时加上css的reset

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 10px;
    border: 1px solid green;
    top: -20px;
    left: -10px;
}



然后把他变成半圆

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 10px;
    border: 1px solid green;
    top: -20px;
    left: -10px;
    border-radius: 10px 10px 0 0;
}



填充颜色，微调

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}



制作眼睛

眼睛应该分左和右，html应该修改一下class名字

index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="san">
                <div class="yuan"></div>
            </div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth"></div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

首先，把眼睛整体绝对定位一下，会发现他们两个重合了，所以我们再单独写左边和右边的眼睛

style.css

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 1px solid red;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -15px;
}



代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 1px solid red;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -15px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}



修改眼睛大小，并且给眼睛上色,修改眼睛的边框，图片中边框是有像素的。

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}



接下来，眼睛里面有白色的圆，我们可以加div也可以使用伪元素。

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 1px solid red;
    width: 10px;
    height: 10px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}



出现了两个伪元素，然后现在我们把它移动到眼睛里变成圆。

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.san{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 25px;
    height: 25px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}



接下来调整鼻子和眼睛的间距，nose没有做定位，所以我们直接把之前那个san改成nose

index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth"></div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

style.css

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 25px;
    height: 25px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}



制作嘴巴

嘴巴分为上嘴唇和下嘴唇

先把html中添加两个div

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth">
            <div class="up"></div>
            <div class="down"></div>
        </div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

给mouth整体做绝对定位

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 25px;
    height: 25px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 100px;
    height: 100px;
    position: absolute; 
    left: 50%;
    top: 200px;
    margin-left: -50px;
}



做一个大小的微调

代码语言：javascript复制
*{box-sizing: border-box;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 25px;
    height: 25px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}



先把皮肤颜色，安排上

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}



制作上嘴唇

添加两个div

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth">
            <div class="up">
                <div class="lip left"></div>
                <div class="lip right"></div>
            </div>
            <div class="down"></div>
        </div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

制作左上嘴唇css

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{

}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
}



多个竖线，怎么也去不掉 ... 我们只能添加一个伪元素，给他遮住

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{

}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 5px;
    height: 20px;
    position: absolute;
    right: -5px;
    bottom: 0;
    background:#ffe600;
}



左上嘴唇搞定，但是我们现在需要给他倾斜一下。

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{

}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(-15deg);
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 7px;
    height: 20px;
    position: absolute;
    right: -6px;
    bottom: 0;
    background:#ffe600;
}



我们 还需要把它网上一点，所以给上嘴唇做个定位。

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -10px;
}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(-15deg);
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 7px;
    height: 20px;
    position: absolute;
    right: -6px;
    bottom: 0;
    background:#ffe600;
}



但是会有点把鼻子遮住，所以我们使用层叠上下文，把鼻子提上来

代码语言：javascript复制
z-index: 1;

制作右上嘴唇css

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(-15deg) translateX(-55px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 7px;
    height: 20px;
    position: absolute;
    right: -6px;
    bottom: 0;
    background:#ffe600;
}

.mouth .up .lip.right{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 50px 0;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(15deg) translateX(55px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.right::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    left: -6px;
    bottom: 0;
    background:#ffe600;
}



左右嘴唇就做好了。接下来，我们把它们往中间聚拢一点

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid red;
    border-color:  red transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(-15deg) translateX(-53px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 7px;
    height: 20px;
    position: absolute;
    right: -6px;
    bottom: 0;
    background:#ffe600;
}

.mouth .up .lip.right{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 50px 0;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(15deg) translateX(53px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.right::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    left: -6px;
    bottom: 0;
    background:#ffe600;
}



去掉border，修改鼻子颜色

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip.left{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 0 50px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(-15deg) translateX(-53px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left::before{
    content: '';
    display: block;
    width: 7px;
    height: 20px;
    position: absolute;
    right: -6px;
    bottom: 0;
    background:#ffe600;
}

.mouth .up .lip.right{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-radius: 0 0 50px 0;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    transform: rotate(15deg) translateX(53px);
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.right::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    left: -6px;
    bottom: 0;
    background:#ffe600;
}



优化代码，有很多重复的内容我们可以简化

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}

制作下嘴唇

先把轮廓画出来

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
}



让后我们需要一个非常 非常 非常高的大圆，所以我们 还需要加一个div

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>皮卡丘_曾老湿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="mouth">
            <div class="up">
                <div class="lip left"></div>
                <div class="lip right"></div>
            </div>
            <div class="down">
                <div class="yuan1"></div>
            </div>
        </div> 
    </div>
    <script src="main.js"></script>
</body>
</html>

然后开始编辑这个大圆,让它变成舌头的轮廓

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
}



接下来，修改颜色调整舌头

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



emmm...好像还得调整一下子,给下嘴唇加一个overflow: hidden;

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 1;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



调整一下舌头和上嘴唇

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



接下来，我上嘴唇是透明的，我需要给他一个颜色，把舌头覆盖住，先测试一下随便给个颜色看看效果。

代码语言：javascript复制
.mouth .up .lip{
    border: 5px solid black;
    background: green;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}



木有问题，然后给背景颜色

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



还不太完美，嘴唇中间有一点点舌头的颜色，把下嘴唇往下一点

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    border: 1px solid red ;
    height: 230px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 1px solid green;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



额。。。看着好像是，好点了，但是舌头有点长啊，我不喜欢，千万不能让女主播看见，调整一下，下嘴唇 的高度 。

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}



然后再画下一个圆，就是给舌头来个阴影颜色。

代码语言：javascript复制
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
        <title>皮卡丘_曾老湿</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="skin">
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="nose">
                <div class="yuan"></div>
            </div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="mouth">
                <div class="up">
                    <div class="lip left"></div>
                    <div class="lip right"></div>
                </div>
                <div class="down">
                    <div class="yuan1">
                        <div class="yuan2"></div>
                    </div>
                </div>
            </div> 
        </div>
        <script src="main.js"></script>
    </body>
    </html>

把yuan2放在yuan1的里面，这样的话，使用overflow:hidden;就可以很好的给yuan2遮住

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
}
.mouth .down .yuan1 .yuan2{
    border: 1px solid green;
    width: 200px;
    height: 300px;
    background: green;
    position: absolute;
    bottom: -150px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}



给yuan1加一个overflow:hidden;

代码语言：javascript复制
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #ff485f;
    overflow: hidden;
}



然后修改一下颜色

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}



制作脸颊

首先把脸也分成左边和右边

修改一下index.html

代码语言：javascript复制
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
        <title>皮卡丘_曾老湿</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="skin">
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="nose">
                <div class="yuan"></div>
            </div>
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="mouth">
                <div class="up">
                    <div class="lip left"></div>
                    <div class="lip right"></div>
                </div>
                <div class="down">
                    <div class="yuan1">
                        <div class="yuan2"></div>
                    </div>
                </div>
            </div> 
        </div>
        <script src="main.js"></script>
    </body>
    </html>

先把脸，整体写出来，然后左边的往左，右边的往右

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
}



代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
}
.face.left{
    transform: translateX(-180px);
}
.face.right{
    transform: translateX(180px);
}



接下来，改成圆形，上颜色

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 5px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
    background: #ff0000;
    border-radius: 50%;
}
.face.left{
    transform: translateX(-180px);
}
.face.right{
    transform: translateX(180px);
}



接下来，进行一些微调

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 3px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
    background: #ff0000;
    border-radius: 50%;
}
.face.left{
    transform: translateX(-180px);
}
.face.right{
    transform: translateX(180px);
}



变化不大，但是CODEPEN上面的皮卡丘，鼠标放到鼻子上，鼻子会动

添加动画

鼠标放到鼻子上会动

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
@keyframes wave{
    0%{
        transform: rotate(0deg);
    }
    33%{
        transform: rotate(5deg);
    }
    66%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.nose:hover{
    transform-origin: center  bottom;
    animation:  wave  300ms infinite linear;
}

.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 3px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
    background: #ff0000;
    border-radius: 50%;
}
.face.left{
    transform: translateX(-180px);
}
.face.right{
    transform: translateX(180px);
}



鼠标放到脸颊上会有闪电(十万伏特)

下载一个闪电的gif，还是在CODEPEN上面



如果有服务器可以将图片上传到自己服务器上，如果没有，，emmm说了你可能不信，有个sm的网站可以帮你https://sm.ms/





就能得到url，话不多说，我有自己服务器，再见来不及握手。http://test.driverzeng.com/Picture/3.gif

拿到url添加到html中

代码语言：javascript复制
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
        <title>皮卡丘_曾老湿</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="skin">
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="nose">
                <div class="yuan"></div>
            </div>
            <div class="face left">
                <img src="http://test.driverzeng.com/Picture/3.gif">
            </div>
            <div class="face right">
                <img src="http://test.driverzeng.com/Picture/3.gif">
            </div>
            <div class="mouth">
                <div class="up">
                    <div class="lip left"></div>
                    <div class="lip right"></div>
                </div>
                <div class="down">
                    <div class="yuan1">
                        <div class="yuan2"></div>
                    </div>
                </div>
            </div> 
        </div>
        <script src="main.js"></script>
    </body>
    </html>



调整图片，先加个边框试探一波

代码语言：javascript复制
.face > img{
    border: 1px solid red;
}



先调整闪电的位置，放到脸颊的圆的正中心

代码语言：javascript复制
.face > img{
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
}



然后把左边脸的闪电翻转

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
@keyframes wave{
    0%{
        transform: rotate(0deg);
    }
    33%{
        transform: rotate(5deg);
    }
    66%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.nose:hover{
    transform-origin: center  bottom;
    animation:  wave  300ms infinite linear;
}

.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 3px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
    background: #ff0000;
    border-radius: 50%;
}
.face > img{
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
}
.face.left{
    transform: translateX(-180px);
}
.face.left > img{
    transform: rotateY(180deg);
    transform-origin: 0 0;
}
.face.right{
    transform: translateX(180px);
}



然后默认不显示闪电 ，当鼠标移动到脸颊，才显示闪电，因为皮卡丘的皮肤颜色缘故，闪电有点不清晰

代码语言：javascript复制
*{box-sizing: border-box;margin: 0;padding: 0;}
*::before,*::after{box-sizing: border-box;}

.skin{
    position: relative;
    background: #ffe600;
    height: 100vh;
}
.nose{
    border: 10px solid #000;
    border-color:  #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 145px;
    margin-left: -10px;
    z-index: 10;
}
@keyframes wave{
    0%{
        transform: rotate(0deg);
    }
    33%{
        transform: rotate(5deg);
    }
    66%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.nose:hover{
    transform-origin: center  bottom;
    animation:  wave  300ms infinite linear;
}

.yuan{
    position: absolute;
    width: 20px;
    height: 6px;
    top: -16px;
    left: -10px;
    border-radius: 10px 10px 0 0;
    background: #000;
}
.eye{
    border: 2px solid #000;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -32px;
    background: #2e2e2e;
    border-radius: 50%;
}
.eye::before{
    content: '';
    display: block;
    border: 3px solid #000;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius: 50%;
    position: relative;
    left: 5px;
    top: 3px;
}
.eye.left{
    transform: translateX(-100px);
}

.eye.right{
    transform: translateX(100px);
}
.mouth{
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 50%;
    top: 170px;
    margin-left: -100px;
}
.mouth .up{
    position: relative;
    top: -20px;
    z-index: 1;
}
.mouth .up .lip{
    border: 3px solid black;
    background: #ffe600;
    height: 30px;
    width: 100px;
    border-top-color: transparent;
    border-right-color: transparent; 
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left{
    border-radius: 0 0 0 50px;
    transform: rotate(-15deg) translateX(-53px);
}
.mouth .up .lip.right{
    border-radius: 0 0 50px 0;
    transform: rotate(15deg) translateX(53px);
}
.mouth .up .lip::before{
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background:#ffe600;
}
.mouth .up .lip.left::before{
    right: -6px;
}
.mouth .up .lip.right::before{
    left: -6px;
}
.mouth .down{
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}
.mouth .down .yuan1{
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px / 300px;
    background: #9b000a;
    overflow: hidden;
}
.mouth .down .yuan1 .yuan2{
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -155px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
.face{
    position: absolute;
    left: 50%;
    border: 3px solid black;
    width: 88px;
    height: 88px;
    top: 200px;
    margin-left: -44px;
    z-index: 3;
    background: #ff0000;
    border-radius: 50%;
}
.face > img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
}
.face:hover > img{
    display: block;
}
.face.left{
    transform: translateX(-180px);
}
.face.left > img{
    transform: rotateY(180deg);
    transform-origin: 0 0;
}
.face.right{
    transform: translateX(180px);
}



构建项目

代码语言：javascript复制
MacBook-pro:pikachu-1 driverzeng$  parcel build src/index.html --no-minify --public-url ./
html css 运维 自动化 javascript

0 人点赞