效果图
index.html
<!doctype html>
<html lang="zh">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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 class="hide"></div>
</div>
<script src="main.js"></script>
</body>
</html>
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before, *::after {
box-sizing: border-box
}
body {
background: #ffe600;
min-height: 100vh;
}
.nose {
border: 10px solid black;
border-color: black transparent transparent transparent;
width: 0;
height: 0;
position: relative;
left: 50%;
top: 145px;
margin-left: -10px;
}
@keyframes wave{
0%{
transform: rotate(0deg);
}
33%{
transform: rotate(10deg);
}
66%{
transform: rotate(-10deg);
}
100%{
transform: rotate(0deg);
}
}
.nose:hover{
/*transform-origin:center bottom;*/
animation:wave 500ms infinite linear;
}
.yuan {
position: absolute;
width: 20px;
height: 10px;
top: -20px;
left: -10px;
border-radius: 10px 10px 0 0;
background: black;
}
.eye {
border: 2px solid #000;
width: 64px;
height: 64px;
position: absolute;
left: 50%;
margin-left: -32px;
top: 100px;
background: #2e2e2e;
border-radius: 50%;
}
.eye::before {
content: '';
display: block;
border: 3px solid #000;
border-radius: 50%;
width: 30px;
height: 30px;
background: #fff;
position: relative;
left: 4px;
top: 2px;
}
.eye.left {
transform: translateX(-100px);
}
.eye.right {
transform: translateX(100px);
}
.mouth {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 170px;
margin-left: -100px;
}
.up {
position: relative;
}
.lip {
height: 30px;
width: 100px;
border: 3px solid black;
border-top: none;
left: 50%;
z-index: 10;
background: #ffe600;
}
.lip.left {
border-radius: 0 0 0 50px;
border-right: none;
transform: rotate(-20deg);
position: absolute;
margin-left: -50%;
}
.lip.right {
border-radius: 0 0 50px 0;
border-left: none;
transform: rotate(20deg);
position: absolute;
}
.down {
height: 180px;
position: absolute;
width: 100%;
overflow: hidden;
}
.yuan1 {
width: 150px;
height: 1000px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -75px;
border-radius: 75px/300px;
background: #9b000a;
overflow: hidden;
border: 3px solid black;
}
.hide {
width: 220px;
height: 10px;
position: absolute;
left: 50%;
margin-left: -110px;
transform: translateY(148px);
background: #ffe600;
}
.yuan2 {
width: 180px;
height: 300px;
position: absolute;
bottom: -160px;
left: 50%;
margin-left: -90px;
background: #ff485f;
border-radius: 100px;
}
.face.left {
position: absolute;
border: 2px solid black;
width: 100px;
height: 100px;
left:50%;
margin-left: -50px;
transform: translateX(-170px);
top:200px;
border-radius: 50%;
background: #ff0000;
}
.face.right {
position: absolute;
border: 2px solid black;
width: 100px;
height: 100px;
left:50%;
margin-left: -50px;
transform: translateX(175px);
top:200px;
border-radius: 50%;
background: #ff0000;
}