html写个小猪佩奇
时间: 2023-12-15 09:32:49 浏览: 26
以下是一个使用HTML和CSS绘制小猪佩奇的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>小猪佩奇</title>
<style>
/* 绘制小猪佩奇的身体 */
.body {
width: 200px;
height: 120px;
background-color: #fcdcdc;
border-radius: 100px 100px 60px 60px;
position: relative;
top: 50px;
margin: 0 auto;
overflow: hidden;
}
/* 绘制小猪佩奇的头部 */
.head {
width: 120px;
height: 120px;
background-color: #fcdcdc;
border-radius: 60px;
position: absolute;
top: -60px;
left: 40px;
overflow: hidden;
}
/* 绘制小猪佩奇的耳朵 */
.ear {
width: 60px;
height: 80px;
background-color: #f4a7b9;
border-radius: 60px 60px 0 0;
position: absolute;
top: -20px;
transform: rotate(-45deg);
}
.ear.left {
left: -10px;
}
.ear.right {
left: 70px;
transform: rotate(45deg);
}
/* 绘制小猪佩奇的眼睛 */
.eye {
width: 20px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 30px;
}
.eye.left {
left: 30px;
}
.eye.right {
left: 70px;
}
/* 绘制小猪佩奇的鼻子 */
.nose {
width: 30px;
height: 20px;
background-color: #f4a7b9;
border-radius: 50%;
position: absolute;
top: 60px;
left: 50px;
}
/* 绘制小猪佩奇的嘴巴 */
.mouth {
width: 60px;
height: 20px;
border-bottom: 5px solid #000;
position: absolute;
top: 80px;
left: 40px;
transform: rotate(-20deg);
}
/* 绘制小猪佩奇的脚 */
.foot {
width: 40px;
height: 80px;
background-color: #f4a7b9;
border-radius: 40px 40px 0 0;
position: absolute;
bottom: -60px;
}
.foot.left {
left: 20px;
}
.foot.right {
right: 20px;
}
/* 绘制小猪佩奇的尾巴 */
.tail {
width: 60px;
height: 60px;
background-color: #f4a7b9;
border-radius: 50%;
position: absolute;
top: 60px;
right: -30px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="body">
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="foot left"></div>
<div class="foot right"></div>
<div class="tail"></div>
</div>
</body>
</html>
```