css3绘制百度的小度熊

网页制作 2024/12/28 佚名

3 2 1

前几天看到一篇文章是写用css3绘制腾讯企鹅的。趁着今天有空，就用css3来写一个百度的小度熊。话不多说，开始上码。

爆照

先来一张呆萌小度熊的成果照。

在绘制小度熊之前，首先要对小度熊布局上进行一个分解，便于我们组织代码结构。从整体结构上主要分成耳朵，头部和身体。我们统一对将胳膊，肚子和腿都放到了身体的部分里。

<!-- 页面框架 -->
<!Doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <title>纯css度熊</title>
    <link rel="stylesheet" href="./bear.css"/>
</head>
<body>
    <!-- 背景 -->
    <div class="bac">
        <!-- 头部 -->
            <!-- 耳朵 -->
            <div class="earLeft"></div>
            <div class="earRight"></div>
            <!-- 脸 -->
            <div class="head"></div>
        <!-- 身体 -->
        <div class="body">
            <!-- 胳膊 -->
            <div class="armLeft"></div>
            <div class="armRight"></div>
            <!-- 肚子 -->
            <div class="tummy"></div>
            <!-- 腿 -->
            <div class="legLeft"></div>
            <div class="legRight"></div>
        </div>
        <!-- 阴影 -->
        <div class="shaodw"></div>
    </div>
</body>

结构调整好之后，我们先把背景容器的位置和大小设置一下。在开发的时候，可以先给背景设置一个深色背景，便于我们看各部分的位置，最后的时候注释掉就可以了。

/*背景容器*/
.bac {
    width: 345px;
    height: 500px;
    top: 50%;
    position: relative;
    left: 50%;
    transform: translate(-50%,-50%);
    /* background-color: #333333; */
 }

头部

然后我们就可以在容器中，放置各个部分了，我是按从上到下的顺序写的，所以最开始放置的是头部。

/*头部*/
.bac .head {
    width: 346px;
    height: 288px;
    /* background-color: #e1b79b; */
    border: 3px solid #a57662;
    border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
    position: relative;
    z-index: 88;
  }

知识点来了，怎么样可以画出这种不规则的形状呢？绘制这种带有弧线的形状，可以使用border-radius属性，具体使用方法这里不深入讨论，简单来说通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。因为我没有准确的尺寸图，所以就用百分比来实现了。

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。这个方法我们在后面还会很频繁的使用到。

耳朵

绘制完头部轮廓之后，我们可以把耳朵的轮廓也加上，本来计划是将耳朵写在头部

内部的，但是因为要考虑层级压盖的情况，还是把耳朵要素单独的放在了外面。这里有一个关键属性就是transform: rotate(Xdeg)用来对要素做旋转，我们可以将耳朵旋转成对应的角度。

/*左耳朵*/
.earLeft {
    height: 50px;
    width: 70px;
    /* background-color: #e1b79b; */
    border-radius: 200px 200px 100px 100px;
    border: 3px solid #a57662;
    transform: rotate(-49deg);
    position: absolute;
    top: 10px;
    left: 12px;
}

/*右耳朵*/
.earRight {
    height: 50px;
    width: 70px;
    /* background-color: #e1b79b; */
    border-radius: 200px 200px 100px 100px;
    border: 3px solid #a57662;
    transform: rotate(40deg);
    position: absolute;
    top: 10px;
    right: 0;
}

眼睛

接下来就开始填充绘制头部里面的内容，头部里面主要是眼睛，鼻子和嘴巴，我们先来画眼睛，为了看的清楚，我们就把头部填充上颜色了。

/*左眼白*/
.head .eyeLeft {
    height: 78px;
    width: 67px;
    background-color: #ffffff;
    border-radius: 50% / 50%;
    transform: rotate(20deg);
    position: absolute;
    top: 113px;
    left: 68px;
 }
 
 /*左眼珠*/
 .head .eyeConLeft {
    width: 28px;
    height: 33px;
    background-color: #511313;
    position: absolute;
    border-radius: 50%/50%;
    transform: rotate(-13deg);
    top: 20px;
    right: 15px;
 }
 
 /*右眼白*/
 .head .eyeRight {
    height: 78px;
    width: 67px;
    background-color: #ffffff;
    border-radius: 50% / 50%;
    transform: rotate(-20deg);
    position: absolute;
    top: 113px;
    right: 68px;
 }
 
 /*右眼珠*/
 .head .eyeConRight {
    width: 28px;
    height: 33px;
    background-color: #511313;
    position: absolute;
    border-radius: 50%/50%;
    transform: rotate(13deg);
    top: 20px;
    left: 15px;
}

嘴巴

绘制了眼睛之后，我们来绘制嘴巴，嘴巴没有太特殊的地方，我们用正常椭圆就可以。

/*嘴巴*/
.head .mouse {
    width: 99px;
    height: 76px;
    background-color: #f7f9e5;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    border-radius: 50% / 50%;
    top: 187px;
 }

鼻子

虽然嘴巴就是一个普通的椭圆，但是鼻子比较特殊，鼻子我们可以看作是一个半椭圆+三角形组成。

知识点又来了，怎么样用css画半椭圆和三角形呢？

我们可以利用 border-radius: 50%/100% 100% 0 0; 来实现半椭圆的绘制。

我们利用将width和height设置为0，通过border属性来实现三角形的绘制。

我为了操作方便，在给鼻子设置来一个容器，使其居中，便于调整。

/*鼻子容器*/
.head .nose {
    width: 18px;
    height: 14px;
    position: absolute;
    left: 50%;
    margin-left: -9px;
    top: 13px;
}

/* 鼻子上部分-半椭圆*/
.nose .noseTop {
    width: 18px;
    height: 8px;
    background-color: #511313;
    border-radius: 50%/100% 100% 0 0;
 }
 
 /* 鼻子下部分-三角形*/
 .nose .noseBottom {
    width: 0;
    height: 0;
    border-width: 9px 9px 0;
    border-style: solid;
    border-color: #511313 transparent transparent;
    position: relative;
 }

耳朵内部

终于完成了头部的操作，结果发现耳朵少了点什么，原来耳朵少了内部的要素，我们就分别给耳朵内部加点东西。

/* 左耳朵内部*/
.earLeft .earCon {
    width: 40px;
    height: 60px;
    background-color: #eed8c5;
    border-radius: 50%/ 40% 40% 30% 30%;
    margin-left: 17px;
    margin-top: 15px;
    transform: rotate(-3deg);
 }
 
 /*右耳朵内部*/
 .earRight .earCon {
    width: 40px;
    height: 60px;
    background-color: #eed8c5;
    border-radius: 50%/ 40% 40% 30% 30%;
    margin-left: 17px;
    margin-top: 15px;
    transform: rotate(-3deg);
 }

辅助要素

小度熊的头部绘制完了，但是耳朵的地方还不够完美，因为头部的轮廓线把耳朵遮住了，我们想让头部和耳朵连在一起，这就用到了我们的辅助要素。我们可以把辅助要素设置成和头部一样的颜色，将头部与耳朵间的轮廓线盖住，这样就看起来好多了。

/*左侧辅助要素*/
.head .arcLeft {
    position: absolute;
    top: 36px;
    left: 23px;
    width: 80px;
    height: 30px;
    background-color: #e1b79b;
    border-radius: 50%/ 50%;
    transform: rotate(-45deg);
}

/*右侧辅助要素*/
.head .arcRight {
    position: absolute;
    top: 34px;
    right: 16px;
    width: 80px;
    height: 30px;
    background-color: #e1b79b;
    border-radius: 50%/ 50%;
    transform: rotate(43deg); 
}

身体

终于完成了头部的绘制，接下来就开始身体的绘制，同样需要先分析一下身体里包括那些部分，我们可以看到身体里主要包括胳膊，肚子和腿。

我们为了看清楚各部分位置，可以先给身体容器加上背景颜色，最后再去掉。

/*度熊身体*/
.body {
    width: 208px;
    height: 217px;
    margin: -10px auto;
    position: relative;
}

胳膊

我们先来添加小度熊的胳膊，最后位置可以再微调。

/*左侧胳膊*/
.body .armLeft {
    width: 53px;
    height: 150px;
    background-color: #e1b79b;
    border: 2px solid #a57662;
    border-radius: 50% 50%/60% 30%;
    transform: rotate(10deg);
    left: 6px;
    position: absolute;
}

/*右侧胳膊*/
.body .armRight {
    width: 53px;
    height: 150px;
    background-color: #e1b79b;
    border: 2px solid #a57662;
    border-radius: 50% 50%/60% 30%;
    transform: rotate(-14deg);
    position: absolute;
    right: 6px;
}

肚子

绘制好胳膊我们就可以绘制小度熊，肉嘟嘟的肚子了。

知识点来了，这里绘制的肚子有一点想鸡蛋形，其实还是利用border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;这个属性来设置的，通过改变半径大小，实现这种鸡蛋形的图案绘制。

之前说的可能漏了一句，我们的要素大部分是基于position: absolute来定位的，因为这个属性可以设置层级，便于我们图案的压盖。这里的肚子就要设置高一点的层级，压盖住之前绘制的胳膊图案。

/*肚子*/
.body .tummy {
    width: 144px;
    height: 200px;
    background-color: #e1b79b;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    margin-top: -30px;
    border: 2px solid #a57662;
 }

肚子图案

在小度熊的肚子上还有一个小图案，我们直接添加覆盖上去就可以了。

/*肚子图案*/
.body .tummyCon {
    width: 83px;
    height: 90px;
    background-color: #f7f9e5;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, 0);
}

腿

绘制好肚子之后，我们来绘制腿，腿上面没有什么太多难点，就是注意边框和脚的弧度就行。

/*左腿*/
.body .legLeft {
    width: 53px;
    height: 100px;
    background-color: #e1b79b;
    position: absolute;
    bottom: 0px;
    left: 30px;
    border: 2px solid #a57662;
    border-color: transparent transparent #a57662 #a57662;
    border-radius: 50% 50% 50% 50%/0 0 10% 50%;
 }
 
 /*右腿*/
 .body .legRight {
    width: 53px;
    height: 100px;
    background-color: #e1b79b;
    position: absolute;
    bottom: 0px;
    right: 30px;
    border: 2px solid #a57662;
    border-color: transparent #a57662 #a57662 transparent;
    border-radius: 50% 50% 50% 50%/0 0 50% 10%;
 }

辅助要素

到这里我们基本的要素就绘制齐了，身体容器的背景颜色就可以去掉了，然后同样要绘制一些辅助元素，来让我们的小度熊看起来更好看。

我们要给小度熊添加一个脖子，盖住身体的线条。

给肚子添加一个曲线，让肚子和腿更立体。

最后就是要用辅助线条把脚展示出来。

把这几个步骤完成，我们的小度熊整体就全部完成了。

/*脖子遮盖*/
.body .neck {
    width: 120px;
    height: 30px;
    background-color: #e1b79b;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
 }
 
 /*肚子辅助线*/
 .body .arc {
    border-bottom: 2px solid #511313;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 100px;
    border: solid 2px #a57662;
    border-color: transparent transparent #a57662 transparent;
    border-radius: 50%/ 0 0 30% 30%;
 }
 
 /*左脚辅助线*/
 .body .arcLeft {
    border-bottom: 2px solid #511313;
    position: absolute;
    bottom: -30px;
    left: 43px;
    width: 35px;
    height: 50px;
    border: solid 2px #a57662;
    border-color: #a57662 transparent transparent transparent;
    border-radius: 50%/ 20% 20% 0 0;
 }
 
 /*右脚辅助线*/
 .body .arcRight {
    border-bottom: 2px solid #511313;
    position: absolute;
    bottom: -30px;
    right: 43px;
    width: 35px;
    height: 50px;
    border: solid 2px #a57662;
    border-color: #a57662 transparent transparent transparent;
    border-radius: 50%/ 20% 20% 0 0;
 }

阴影

最后一步，给小度熊的脚底加一个阴影，我们就大功告成了。

/*阴影*/
.shaodw {
    width: 217px;
    height: 39px;
    background-color: #e9ecee;
    margin: -20px auto;
    border-radius: 50%/50%;
}

总结

绘制小度熊的关键是一个是对于布局的分析，一个是css的border-radius和transform: rotate属性的使用。

css3绘制百度度熊,,css,百度度熊

标签：

css3绘制百度度熊,,css,百度度熊

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“css3绘制百度的小度熊”

css3绘制百度的小度熊

暂无“css3绘制百度的小度熊”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

css3绘制百度的小度熊

css3绘制百度度熊,,css,百度度熊

使用CSS transition和animation改变渐变状态的实现方法

移动端优先的flex三栏布局的使用方法

评论“css3绘制百度的小度熊”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

css3绘制百度的小度熊

css3绘制百度度熊,,css,百度度熊

使用CSS transition和animation改变渐变状态的实现方法

移动端优先的flex三栏布局的使用方法

评论“css3绘制百度的小度熊”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存