用hmtl、css制作一个猩猩
时间: 2024-05-10 14:17:19 浏览: 6
好的,以下是一个简单的猩猩 HTML 和 CSS 代码示例:
HTML 代码:
```
<div class="ape">
<div class="head">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="ear"></div>
<div class="ear"></div>
</div>
<div class="body"></div>
<div class="arm"></div>
<div class="arm"></div>
<div class="leg"></div>
<div class="leg"></div>
</div>
```
CSS 代码:
```
.ape {
position: relative;
width: 200px;
height: 300px;
background-color: #8B4513;
border-radius: 50% / 60%;
overflow: hidden;
}
.head {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
background-color: #DAA520;
border-radius: 50%;
overflow: hidden;
}
.face {
position: relative;
width: 80px;
height: 80px;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #FFDAB9;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px #000;
}
.eye {
position: absolute;
top: 25%;
width: 25px;
height: 25px;
background-color: #000;
border-radius: 50%;
box-shadow: 0 0 5px #000;
}
.eye:first-child {
left: 25%;
}
.eye:last-child {
right: 25%;
}
.nose {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
background-color: #FFDAB9;
border-radius: 50% 50% 0 0;
box-shadow: 0 0 5px #000;
}
.mouth {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 25px;
background-color: #000;
border-radius: 0 0 50% 50%;
}
.ear {
position: absolute;
top: 20%;
width: 40px;
height: 80px;
background-color: #DAA520;
border-radius: 50% / 60%;
box-shadow: 0 0 10px #000;
}
.ear:first-child {
left: -20%;
transform: rotate(-30deg);
}
.ear:last-child {
right: -20%;
transform: rotate(30deg);
}
.body {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 140px;
background-color: #DAA520;
border-radius: 50% / 60%;
box-shadow: 0 0 10px #000;
}
.arm {
position: absolute;
top: 120px;
width: 30px;
height: 80px;
background-color: #FFDAB9;
border-radius: 50%;
box-shadow: 0 0 10px #000;
}
.arm:first-child {
left: -40px;
transform: rotate(30deg);
}
.arm:last-child {
right: -40px;
transform: rotate(-30deg);
}
.leg {
position: absolute;
top: 240px;
width: 40px;
height: 100px;
background-color: #FFDAB9;
border-radius: 50%;
box-shadow: 0 0 10px #000;
}
.leg:first-child {
left: -20px;
transform: rotate(20deg);
}
.leg:last-child {
right: -20px;
transform: rotate(-20deg);
}
```
你可以将以上代码复制到你的 HTML 文件中,然后在浏览器中查看效果。