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; */ }

頭部

然后我們就可以在容器中，放置各個部分了，我是按從上到下的順序寫的，所以最開始放置的是頭部。