css3绘制百度的小度熊

2024-07-11 08:25:23

字体：大中小

来源：转载

供稿：网友

前几天看到一篇文章是写用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; */ }

头部

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