Code前端首页关于Code前端联系我们
首页 后端开发数据结构与算法正文

用css3画腾讯企鹅是什么意思？姐姐，让我画一只百度熊吧~

terry 2年前 (2023-09-27) 阅读数 67 #数据结构与算法

用CSS3画腾讯企鹅太神奇了。利用今天的空闲时间，我用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>
复制代码

调整结构后，我们首先设置背景容器的位置和大小。开发时，我们可以先将背景设置为深色，这样可以看到各个部分的位置，然后在最后进行注释即可。 

/*背景容器*/
*{
    margin:0px;
    padding:0px;
}
html{
    height:100%;
} 
body{
   height:100%;
   background-color: #333333;
}
.bac {
    width: 345px;
    height: 500px;
    top: 50%;
    position: relative;
    left: 50%;
    transform: translate(-50%,-50%);
    /* background-color: #333333; */
 }
复制代码

头部

然后我们就可以把各个部件放入容器中了。我是按照从上到下的顺序写的，所以头放在前面。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*头部*/
.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)用于旋转元素。我们可以将耳朵旋转到相应的角度。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*左耳朵*/
.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;
}
复制代码

眼睛

接下来我们开始填充并绘制头部内部的内容。头部主要是眼睛、鼻子和嘴巴。我们先画眼睛。为了看得清楚，我们用颜色填充头部。 。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*左眼白*/
.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;
}
复制代码

嘴巴

画完眼睛，我们来画嘴巴。嘴巴没有什么特别的。我们可以只使用一个规则的椭圆。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

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

鼻子

虽然嘴是规则的椭圆形，但鼻子却很特别。我们可以把鼻子想象成半椭圆+三角形。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

知识点又来了，如何用CSS画半椭圆和三角形？

我们可以使用边缘半径：50%/100% 100% 0 0；绘制半椭圆。css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

我们使用边框属性通过将宽度和高度设置为0来绘制三角形。css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

为了简单起见，我放置了一个鼻子容器，将其居中以便于对齐。 

/*鼻子容器*/
.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;
 }
复制代码

耳朵里面

终于完成了头部的手术，发现耳朵少了点东西。事实证明，耳朵缺少内部元素，所以我们在耳朵内部添加了一些东西。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/* 左耳朵内部*/
.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);
 }
复制代码

辅助元素

小度熊的头像已经画好了，但是耳朵还没有完美，因为头像的轮廓遮住了耳朵。我们希望头部和耳朵挂在一起，因此使用了我们的支撑元件。我们可以将助手设置为与头部相同的颜色，并覆盖头部和耳朵之间的轮廓，这样看起来就好多了。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*左侧辅助要素*/
.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); 
}
复制代码

身体

终于画完了头部，接着开始画身体。我们还需要先分析身体部位。我们可以看到身体主要包括手臂、胃和腿。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

为了清楚地看到各个部分的位置，我们可以先给body容器添加背景颜色，最后将其删除。 

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

手臂

我们先添加小度熊的手臂，最后的位置可以调整。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*左侧胳膊*/
.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;
}
复制代码

肚皮

画完手臂，我们就可以画小度熊圆滚滚的肚子了。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

知识点来了。这里画的胃有点像鸡蛋的形状。其实我们还是用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;
 }
复制代码

图案图案

小度熊的肚子上也有一个小图案。我们只需添加它并覆盖它即可。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*肚子图案*/
.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);
}
复制代码

腿

画完肚子，我们来画腿。腿部没有太大难度，只要注意脚部的边缘和弧度即可。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*左腿*/
.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%;
 }
复制代码

辅助元素

至此我们已经绘制了所有的基本元素。主体容器的背景颜色可以被删除。然后我们还需要画一些辅助元素，让我们的小度熊看起来更好看。

我们要给小度熊加一个脖子，遮住身体的线条。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

给腹部添加曲线，让腹部和腿部更加立体。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

最后一步是使用指南来显示脚部。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

完成这些步骤之后，我们的小度熊整体就完成了。 css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

/*脖子遮盖*/
.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;
 }
复制代码

阴影

最后一步是为小度熊的脚底添加阴影，我们就完成了。css3绘制腾讯企鹅算什么？姐给你画个百度熊〜

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

总结

画小度熊的关键是布局的分析，以及CSS的border-radius和transform:rotate属性的使用。

作者：兰兰兰
来源：掘金

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：CSS知识：后台混合模式打造特效 下一篇：HTML5视频视频字幕的使用和制作
相关文章
terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白