用html和css制作小黄人模型
时间: 2023-08-21 08:01:52 浏览: 37
以下是一个基本的小黄人模型的HTML和CSS代码:
HTML代码:
```html
<div class="minion">
<div class="body">
<div class="goggles">
<div class="goggle"></div>
<div class="goggle"></div>
</div>
</div>
<div class="arms">
<div class="arm"></div>
<div class="arm"></div>
</div>
<div class="feet">
<div class="foot"></div>
<div class="foot"></div>
</div>
</div>
```
CSS代码:
```css
.minion {
width: 250px;
height: 400px;
position: relative;
margin: 50px auto;
}
.body {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 50px;
left: 25px;
}
.goggles {
width: 60px;
height: 30px;
position: absolute;
top: 70px;
left: 70px;
}
.goggle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.goggle:first-child {
left: 0;
}
.arms {
width: 200px;
height: 30px;
position: absolute;
top: 150px;
left: 25px;
}
.arm {
width: 80px;
height: 30px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
.arm:first-child {
transform: rotate(45deg);
}
.feet {
width: 200px;
height: 30px;
position: absolute;
top: 350px;
left: 25px;
}
.foot {
width: 80px;
height: 30px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
.foot:first-child {
transform: rotate(-45deg);
}
.foot:last-child {
transform: rotate(45deg);
}
```
这只是一个基本的小黄人模型,你可以根据自己的需要和创意进行修改和添加细节。