当前位置：首页 > CSS

css制作熊

2026-02-27 09:23:26CSS

css制作熊

CSS 绘制卡通熊

通过纯CSS可以创建一个简单的卡通熊形象，主要利用border-radius、box-shadow和伪元素实现。以下是实现代码和分解说明：

<div class="bear"></div>

.bear {
    position: relative;
    width: 200px;
    height: 150px;
    background: #8B4513;
    border-radius: 50% 50% 45% 45%;
    margin: 50px auto;
}

.bear::before, .bear::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    top: 40px;
}

.bear::before {
    left: 45px;
}

.bear::after {
    right: 45px;
}

.bear .nose {
    position: absolute;
    width: 30px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    top: 70px;
    left: 85px;
}

.bear .mouth {
    position: absolute;
    width: 60px;
    height: 20px;
    border-bottom: 3px solid #000;
    border-radius: 0 0 50% 50%;
    top: 90px;
    left: 70px;
}

关键实现点

主体形状：通过border-radius设置椭圆形的熊头，棕色背景（#8B4513）模拟毛色。
眼睛：使用伪元素::before和::after创建两个圆形黑点，对称分布在头部两侧。
鼻子：绝对定位的黑色椭圆，位于眼睛下方居中位置。
嘴巴：利用border-bottom制作微笑曲线，通过调整弧度实现自然效果。

进阶优化

添加耳朵和细节可增强真实感：

.bear .ear {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #5C3317;
    border-radius: 50%;
    top: -20px;
    z-index: -1;
}

.bear .ear.left {
    left: 30px;
}

.bear .ear.right {
    right: 30px;
}