css画一只猪
时间: 2023-07-25 09:17:12 浏览: 42
好的,以下是我用 CSS 画的一只猪:
```html
<div class="pig">
<div class="body">
<div class="head">
<div class="ear"></div>
<div class="ear"></div>
<div class="eye"></div>
<div class="nose"></div>
</div>
<div class="leg"></div>
<div class="leg"></div>
<div class="tail"></div>
</div>
</div>
```
```css
.pig {
position: relative;
width: 150px;
height: 100px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background-color: #fdd7e4;
overflow: hidden;
}
.head {
position: absolute;
top: -50px;
left: 40px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fdd7e4;
transform: rotate(-30deg);
}
.ear {
position: absolute;
top: 10px;
left: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fdd7e4;
}
.ear:last-child {
top: 0;
left: 40px;
}
.eye {
position: absolute;
top: 20px;
left: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.nose {
position: absolute;
top: 30px;
left: 20px;
width: 20px;
height: 10px;
border-radius: 5px;
background-color: #000;
}
.leg {
position: absolute;
bottom: -10px;
width: 20px;
height: 60px;
border-radius: 50%;
background-color: #fdd7e4;
}
.leg:first-child {
left: 20px;
}
.leg:last-child {
left: 60px;
}
.tail {
position: absolute;
bottom: 0;
right: -10px;
width: 40px;
height: 20px;
border-radius: 50%;
background-color: #fdd7e4;
transform: rotate(30deg);
}
```
希望您喜欢我的作品!