css制作小猪
使用CSS绘制小猪
以下是通过纯CSS绘制卡通小猪的代码示例，结合圆形、椭圆形和阴影效果实现：
<!DOCTYPE html>
<html>
<head>
<style>
.pig {
position: relative;
width: 200px;
height: 180px;
margin: 50px auto;
}
/* 头部 */
.head {
width: 160px;
height: 140px;
background: pink;
border-radius: 50%;
position: relative;
}
/* 耳朵 */
.ear {
width: 40px;
height: 60px;
background: pink;
border-radius: 50%;
position: absolute;
top: -20px;
}
.ear.left {
left: 20px;
transform: rotate(-30deg);
}
.ear.right {
right: 20px;
transform: rotate(30deg);
}
/* 眼睛 */
.eye {
width: 20px;
height: 30px;
background: white;
border-radius: 50%;
position: absolute;
top: 50px;
}
.eye.left {
left: 40px;
}
.eye.right {
right: 40px;
}
.eye::after {
content: '';
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
bottom: 5px;
left: 5px;
}
/* 鼻子 */
.nose {
width: 50px;
height: 30px;
background: #ff99aa;
border-radius: 50%;
position: absolute;
bottom: 40px;
left: 55px;
}
.nose::before, .nose::after {
content: '';
width: 8px;
height: 8px;
background: black;
border-radius: 50%;
position: absolute;
top: 10px;
}
.nose::before {
left: 10px;
}
.nose::after {
right: 10px;
}
</style>
</head>
<body>
<div class="pig">
<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>
</div>
</body>
</html>关键实现技巧
使用圆形边框半径创建头部和耳朵的基本形状：
border-radius: 50%;通过伪元素添加细节（如眼睛瞳孔和鼻孔）：
.eye::after {
content: '';
/* 其他样式 */
}使用绝对定位精确放置各个部位：
position: absolute;
top: 50px;
left: 40px;进阶优化建议
添加阴影增强立体感：
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);增加动画效果使小猪更生动：
@keyframes breathe {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.head {
animation: breathe 2s infinite;
}调整颜色渐变使更逼真：
background: linear-gradient(to bottom, #ffb6c1, #ff69b4);
