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=http://www.cppcns.com/web/css/"./bear.css"/>


    
    

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

/*背景容器*/
.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;
}

css3绘制百度的小度熊

扫一扫手机访问