css3绘图百度搜索的小度熊

2021-03-17 18:11 jianzhan

前几日看到1篇文章内容是写用css3绘图腾迅企鹅的。趁着今日有时间,就用css3来写1个百度搜索的小度熊。话很少说,刚开始上码。

爆照

先来1张呆萌小度熊的成效照。


 

在绘图小度熊以前,最先要对小度熊合理布局勤奋行1个溶解,便于大家机构编码构造。 从总体构造上关键分为耳朵,头顶部和人体。大家统1对将胳膊,肚子和腿都放到了人体的一部分里。

<!-- 网页页面架构 -->
<!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>

构造调剂好以后,大家先把情况器皿的部位和尺寸设定1下。在开发设计的情况下,能够先给情况设定1个深色情况,便于大家看各处分的部位,最终的情况下注解掉便可以了。

/*情况器皿*/
.bac {
    width: 345px;
    height: 500px;
    top: 50%;
    position: relative;
    left: 50%;
    transform: translate(⑸0%,⑸0%);
    /* 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值,能够轻轻松松给元素设定圆角边框,乃至完成绘图圆、半圆、4分之1的圆等各种各样圆角图型。由于我沒有精确的规格图,因此就用百分比来完成了。

“/”前的4个标值表明圆角的水平半径,后边4个值表明圆角的竖直半径。这个方式大家在后边还会很经常的应用到。

耳朵

绘图完头顶部轮廊以后,大家能够把耳朵的轮廊也再加,原本方案是将耳朵写在头顶部

內部的,可是由于要考虑到等级压盖的状况,還是把耳朵要素独立的放在了外面。这里有1个重要特性便是transform: rotate(Xdeg)用来对要素做转动,大家能够将耳朵转动成对应的角度。
 

/*左耳朵*/
.earLeft {
    height: 50px;
    width: 70px;
    /* background-color: #e1b79b; */
    border-radius: 200px 200px 100px 100px;
    border: 3px solid #a57662;
    transform: rotate(⑷9deg);
    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(⑴3deg);
    top: 20px;
    right: 15px;
 }
 
 /*右眼白*/
 .head .eyeRight {
    height: 78px;
    width: 67px;
    background-color: #ffffff;
    border-radius: 50% / 50%;
    transform: rotate(⑵0deg);
    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(⑸0%,0);
    border-radius: 50% / 50%;
    top: 187px;
 }

鼻部

尽管嘴巴便是1个一般的椭圆,可是鼻部较为独特,鼻部大家能够看做是1个半椭圆+3角形构成。


 

专业知识点又来了,如何用css画半椭圆和3角形呢?

大家能够运用 border-radius: 50%/100% 100% 0 0; 来完成半椭圆的绘图。


 

大家运用将width和height设定为0,根据border特性来完成3角形的绘图。


 

我以便实际操作便捷,在给鼻部设定来1个器皿,使其垂直居中,便于调剂。

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

/* 鼻部上一部分-半椭圆*/
.nose .noseTop {
    width: 18px;
    height: 8px;
    background-color: #511313;
    border-radius: 50%/100% 100% 0 0;
 }
 
 /* 鼻部下一部分-3角形*/
 .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(⑶deg);
 }
 
 /*右耳朵內部*/
 .earRight .earCon {
    width: 40px;
    height: 60px;
    background-color: #eed8c5;
    border-radius: 50%/ 40% 40% 30% 30%;
    margin-left: 17px;
    margin-top: 15px;
    transform: rotate(⑶deg);
 }

輔助要素

小度熊的头顶部绘图完了,可是耳朵的地区还不足完善,由于头顶部的轮廊线把耳朵遮挡住了,大家想让头顶部和耳朵连在1起,这就用到了大家的輔助要素。大家能够把輔助要素设定成和头顶部1样的色调,将头顶部与耳朵间的轮廊线盖住,这样就看起来许多了。
 

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

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

人体

终究进行了头顶部的绘图,接下来就刚开始人体的绘图,一样必须先剖析1下人体里包含那些一部分,大家能够看到人体里关键包含胳膊,肚子和腿。


 

大家以便看清晰各处分部位,能够先给人体器皿再加情况色调,最终再去掉。

/*度熊人体*/
.body {
    width: 208px;
    height: 217px;
    margin: ⑴0px 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(⑴4deg);
    position: absolute;
    right: 6px;
}

肚子

绘图好胳膊大家便可以绘图小度熊,肉嘟嘟的肚子了。


 

专业知识点来了,这里绘图的肚子有1点想鸡蛋形,实际上還是运用border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;这个特性来设定的,根据更改半径尺寸,完成这类鸡蛋形的图案设计绘图。

以前说的将会漏了1句,大家的要素绝大多数是根据position: absolute来精准定位的,由于这个特性能够设定等级,便于大家图案设计的压盖。这里的肚子就要设定高1点的等级,压盖住以前绘图的胳膊图案设计。

 

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

 

肚子图案设计

在小度熊的肚子上也有1个小图案设计,大家立即加上遮盖上去便可以了。

/*肚子图案设计*/
.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(⑸0%, 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%;
 }

輔助要素

到这里大家基础的要素就绘图齐了,人体器皿的情况色调便可以去掉了,随后一样要绘图1些輔助元素,来让大家的小度熊看起来更漂亮。

大家要给小度熊加上1个脖子,盖住人体的线条。

给肚子加上1个曲线图,让肚子和腿更立体式。

最终便是要用輔助线条把脚展现出来。

把这几个流程进行,大家的小度熊总体就所有进行了。

/*脖子遮住*/
.body .neck {
    width: 120px;
    height: 30px;
    background-color: #e1b79b;
    position: absolute;
    left: 50%;
    transform: translate(⑸0%,0);
 }
 
 /*肚子輔助线*/
 .body .arc {
    border-bottom: 2px solid #511313;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(⑸0%, 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: ⑶0px;
    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: ⑶0px;
    right: 43px;
    width: 35px;
    height: 50px;
    border: solid 2px #a57662;
    border-color: #a57662 transparent transparent transparent;
    border-radius: 50%/ 20% 20% 0 0;
 }

 黑影

最终1步,给小度熊的脚底加1个黑影,大家就大获全胜了。

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

总结

绘图小度熊的重要是1个是针对合理布局的剖析,1个是css的border-radius和transform: rotate特性的应用。