<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
min-height: 100vh;
background-color:black;
}
.ghost{
position: relative;
width:150px;
height:225px;
border-radius:75px 70px 0 0;
background-color: #fff;
/* 默认是外部阴影，如果单独加inset，则是内部阴影 */
box-shadow:-17px 0 0 #dbdbdb inset,0 0 50px red;
animation:move1 2s infinite;
}
.ghost::before{
position: absolute;
content: "";
width: 150px;
padding-top:40px;
border: 1px solid yellow;
border-radius: 50%;
top: -20px;
left:2px;
}
.eyes{
display: flex;
/* 最大化利用水平空间 */
justify-content: space-around;
width: 90px;
padding-top: 70px;
margin: 0 auto;
}
.eyes::before,.eyes::after{
content:"";
width:20px;
height: 25px;
border-radius: 50%;
background-color:red;
}
.dimples{
display: flex;
justify-content: space-around;
width: 130px;
padding-top: 15px;
margin: 0 auto;
}
.dimples::before,.dimples::after{
content:"";
width:15px;
height:15px;
border-radius: 50%;
background-color: pink;
}
.mouth{
border-radius:50px;
width: 25px;
height:35px;
background-color: black;
margin: 0 auto;
}
.feet{
position: absolute;
display: flex;
width:100%;
bottom:-13px;
}
.foot{
width: 25%;
height: 26px;
border-radius: 50%;
background-color: #fff;
}
.foot:last-child{
background-image: linear-gradient(to right,#fff 55%,#dbdbdb 45%);
}
.shadow{
width: 150px;
height: 40px;
margin-top: 50px;
border-radius: 50%;
background-color:red;
animation: move2 2s linear infinite;
}
@keyframes move1{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-15px);
}
}
@keyframes move2{
0%,100%{
transform: scale(1);
}
50%{
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="container">
<div class="Q"></div>
<div class="ghost">
<div class="eyes"></div>
<div class="dimples"></div>
<div class="mouth"></div>
<div class="feet">
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
</div>
</div>
<div class="shadow"></div>
</div>
<div class="dh">
<a href=""></a>
</div>
</body>
</html>