持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

最近隔离，闲来无事，给大家画一只小熊，训练一下我的css功底，和审美，哈哈哈哈

样式

以这只抖音小熊为例子，先分析，

头可以使用两个半圆，一个大一点，一个小一点，
耳朵就用两个圆
眉毛用一条边框，一个眼睛是圆，另一个用小于号
鼻子用椭圆，长一点，嘴巴可以用三个圆弧代替这样一个熊头就完成了

布局

布局因为要精确到像素位置，我们用定位来做，先画熊头 html中

<header>
    <div class="headerTop">
    <div class="headerBottom"></div>
</header>

在css中

.bear {
    position: relative;
    background-color: #a9a69f;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-200px);
}

.headerTop {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-90px);
    width: 180px;
    height: 180px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-top: 1px solid black;
}

.headerBottom {
    z-index: 1;
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 30%;
    transform: translate(-100px, -50px);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom: 1px solid black;
}

主要是通过border调整圆弧，和隐藏另一部分，通过position调整头的为位置

接下来画眉毛和眼睛，眉毛要用到transform: rotate();属性，对眉毛惊醒旋转，然后把它定为到对应的位置 css

.handLeft2 {
    position: absolute;
    left: 20px;
    top: 0;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 50%;
}

.handLeft1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 50%;
}

好，截至现在，一个有点眉清目秀的小熊出现了

接下来是耳朵

耳朵就用两个圆，定位到头上

.ear {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 50%;
}

.earLeft {
    position: absolute;
    left: -5px;
    top: -5px;
}

.earRight {
    position: absolute;
    right: -5px;
    top: -5px;
}

眼睛来了，一只用椭圆，一只用小于号，然后对小于号调整小旋转角度

.eyeLeft {
    position: absolute;
    left: 50px;
    top: 100px;
    width: 10px;
    height: 13px;
    background-color: black;
    border-radius: 50%;
}

.eyeRight {
    position: absolute;
    left: 120px;
    top: 87px;
    width: 10px;
    height: 10px;
}

接下来是嘴巴，嘴巴用三条圆弧完成，通过旋转放到最佳位置，鼻子同样

结束

看最终效果

嘿嘿，加油哦

闲来无事，画一只小熊

前言

样式

布局

结束