37·灵魂前端工程师养成-[项目]JS画皮卡丘
37·灵魂前端工程师养成-[项目]JS画皮卡丘
DriverZeng
发布于 2022-11-08 16:40:42
发布于 2022-11-08 16:40:42
-曾老湿, 江湖人称曾老大。 -笔者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 创建出来
然后手机页面去淘宝复制
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

index.html
<!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>运行项目
MacBook-pro:pikachu-1 driverzeng$ parcel src/index.html 打开浏览器访问：http://localhost:1234

编写html制作 |
|---|


<!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
<!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
.san{
border: 1px solid red;
width: 10px;
height: 10px;
}

我们想把它放在皮肤的中间，所以皮肤应该是相对定位，三角形是绝对定位
style.css
.skin{
position: relative;
}
.san{
border: 1px solid red;
width: 10px;
height: 10px;
position: absolute;
left: 50%;
top: 200px;
margin-left: -5px;
}

然后把border加粗，变成4个颜色
.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
.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;
}

如此一来，就能看见每一个颜色都是一个三角形，那么我们只要其中的一个红色三角形,把其他颜色变成透明的
.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
<!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
*{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;
}

然后把他变成半圆
*{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;
}

填充颜色，微调
*{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
<!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
*{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;
}

*{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);
}

修改眼睛大小，并且给眼睛上色,修改眼睛的边框，图片中边框是有像素的。
*{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也可以使用伪元素。
*{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);
}

出现了两个伪元素，然后现在我们把它移动到眼睛里变成圆。
*{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
<!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
*{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 |
|---|
<!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整体做绝对定位 |
|---|
*{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;
}

做一个大小的微调
*{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;
}

先把皮肤颜色，安排上
*{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
<!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 |
|---|
*{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;
}

多个竖线，怎么也去不掉 ... 我们只能添加一个伪元素，给他遮住
*{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;
}

左上嘴唇搞定，但是我们现在需要给他倾斜一下。
*{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;
}

我们 还需要把它网上一点，所以给上嘴唇做个定位。
*{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;
}

但是会有点把鼻子遮住，所以我们使用层叠上下文，把鼻子提上来
z-index: 1;制作右上嘴唇css |
|---|
*{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;
}

左右嘴唇就做好了。接下来，我们把它们往中间聚拢一点
*{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，修改鼻子颜色
*{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;
}

优化代码，有很多重复的内容我们可以简化
*{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;
}制作下嘴唇 |
|---|
先把轮廓画出来
*{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
<!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>然后开始编辑这个大圆,让它变成舌头的轮廓
*{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;
}

接下来，修改颜色调整舌头
*{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;
*{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;
}

调整一下舌头和上嘴唇
*{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;
}

接下来，我上嘴唇是透明的，我需要给他一个颜色，把舌头覆盖住，先测试一下随便给个颜色看看效果。
.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;
}

木有问题，然后给背景颜色
*{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;
}

还不太完美，嘴唇中间有一点点舌头的颜色，把下嘴唇往下一点
*{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;
}

额。。。看着好像是，好点了，但是舌头有点长啊，我不喜欢，千万不能让女主播看见，调整一下，下嘴唇 的高度 。
*{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;
}

然后再画下一个圆，就是给舌头来个阴影颜色。
<!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遮住
*{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;
.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;
}

然后修改一下颜色
*{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
<!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>先把脸，整体写出来，然后左边的往左，右边的往右
*{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;
}

*{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);
}

接下来，改成圆形，上颜色
*{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);
}

接下来，进行一些微调
*{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上面的皮卡丘，鼠标放到鼻子上，鼻子会动
添加动画
鼠标放到鼻子上会动 |
|---|
*{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);
}
pikachu_nose

鼠标放到脸颊上会有闪电(十万伏特) |
|---|
下载一个闪电的gif，还是在CODEPEN上面

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


就能得到url，话不多说，我有自己服务器，再见来不及握手。http://test.driverzeng.com/Picture/3.gif
拿到url添加到html中
<!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>

调整图片，先加个边框试探一波
.face > img{
border: 1px solid red;
}

先调整闪电的位置，放到脸颊的圆的正中心
.face > img{
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
}

然后把左边脸的闪电翻转
*{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);
}

然后默认不显示闪电 ，当鼠标移动到脸颊，才显示闪电，因为皮卡丘的皮肤颜色缘故，闪电有点不清晰
*{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);
}
pikachu_face

构建项目
MacBook-pro:pikachu-1 driverzeng$ parcel build src/index.html --no-minify --public-url ./本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-05-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
运维安全中心（堡垒机）
腾讯云运维安全中心（堡垒机）（Operation and Maintenance Security Center (Bastion Host)）可为您的 IT 资产提供代理访问以及智能操作审计服务，为客户构建一套完善的事前预防、事中监控、事后审计安全管理体系，助力企业顺利通过等保测评。