css猫表情制作
CSS猫表情制作方法
使用纯CSS绘制猫表情
通过CSS的border-radius、transform和伪元素实现猫脸和耳朵的基本形状。例如：
.cat-face {
width: 100px;
height: 80px;
background: #FFD700;
border-radius: 50%;
position: relative;
}
.cat-face::before, .cat-face::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #FFD700;
top: -10px;
border-radius: 50% 50% 0 0;
}添加眼睛和胡须
用绝对定位和box-shadow绘制眼睛，线条类属性制作胡须：
.eyes {
position: absolute;
width: 10px;
height: 15px;
background: #000;
border-radius: 50%;
top: 30px;
}
.whiskers {
position: absolute;
width: 40px;
height: 1px;
background: #000;
transform: rotate(20deg);
}动画效果
通过@keyframes实现眨眼或摇尾巴的动画：
@keyframes blink {
0%, 100% { height: 15px; }
50% { height: 2px; }
}
.eyes {
animation: blink 3s infinite;
}表情变体控制
利用CSS变量或类切换实现不同表情（如开心、生气）：
.cat-happy .mouth {
width: 30px;
height: 10px;
border-bottom: 2px solid #000;
border-radius: 0 0 50% 50%;
}
.cat-angry .eyebrows {
transform: rotate(10deg);
}响应式调整
使用vw/vh单位或媒体查询适配不同屏幕：
@media (max-width: 600px) {
.cat-face {
width: 60px;
height: 50px;
}
}完整示例结构
HTML基础结构需包含所有CSS控制的元素：
<div class="cat-face">
<div class="eyes left-eye"></div>
<div class="eyes right-eye"></div>
<div class="mouth"></div>
</div>
