怎么在stylus下用DIV+CSS打造小丸子

本文小編為大家詳細(xì)介紹“怎么在stylus下用DIV+CSS打造小丸子”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么在stylus下用DIV+CSS打造小丸子”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

準(zhǔn)備工作

1. npm安裝stylus---->npm install -g stylus

2. 在項(xiàng)目目錄下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css

3. 命令行切換至項(xiàng)目目錄

   啟動(dòng)live-server實(shí)時(shí)刷新 -->live-server

   啟動(dòng)stylus,監(jiān)視wanzi.styl--->stylus -w wanzi.styl

構(gòu)造小丸子整體結(jié)構(gòu)

先分析下小丸子的構(gòu)造,小丸子長(zhǎng)了:

1. 1張臉

2. 頭發(fā)

3. 脖子

4. 身子,身子上穿了衣服

5. 腰上有皮帶

6. 兩只手

7. 兩條腿,穿了紅裙子

8. 腳,穿了紅鞋

臉的構(gòu)造

先設(shè)置基礎(chǔ)樣式

base-color
 = #152131body font-size 20pxbody, div margin 0 padding 0 background 
#ffef5e.border border 1px solid base-color.main position relative width 
1000px height 1000px margin 50px auto.wanzi position absolute top 250px 
left 100px z-index 10

臉部基礎(chǔ)樣式

.face
 background #fbdac7 width 126px height 113px position absolute border 
1px solid #000 top 0 left 20% border-radius 18px 40px 80px 80px

• 眉毛

  實(shí)現(xiàn)原理:設(shè)置width,height確定眉毛長(zhǎng)度,border-radius確定圓化程度,transform:rotate()確定眉毛擺放傾斜程度

.brow
 width 37px height 3px background base-color position absolute top 31px 
border-radius 50% &.left-brow left 13px transform: rotate(-13deg) 
&.right-brow right 13px transform: rotate(13deg)

• 眼睛

  實(shí)現(xiàn)原理:將盒子用border-radius圓化四角,形成圓形,width和height影響眼睛大小,形狀

.eye
 width 13px height 13px border-radius: 50% background #000000 position 
absolute top 45px z-index 2 &.left-eye left 30% &.right-eye 
right 30%

• 耳朵

  實(shí)現(xiàn)原理:設(shè)置border-radius,width和height影響耳朵大小,形狀

.ear
 width 17px height 26px position absolute top 30px background-color 
#fbdac7 z-index 2 &.left-ear left -10% border-radius: 40% 0 0 69% 
&.right-ear right -10% border-radius 0 40% 69% 0

• 酒窩

  實(shí)現(xiàn)原理:設(shè)置border-radius,width和height影響酒窩大小,形狀

.blusher
 width 14px height 14px border-radius 50% background-color #f79c99 
position absolute top 77px z-index 2 &.left-blusher left 9% 
&.right-blusher right 9%

• 嘴巴

  實(shí)現(xiàn)原理:使用圓角border-radius將盒子弄圓,通過定義偽元素after后的樣式,將偽元素背景顏色設(shè)置成臉部顏色,達(dá)到遮住嘴巴盒子上部分的效果,形成嘴巴的形狀

.mouth
 width 30px height 27px border-radius:79% border: 1px solid #000 
background-color #e77072 position absolute top 62px left 38% z-index 1 
&:after content '' /* 必須要有content屬性*/ width 32px height 25px 
position absolute top -9px left -1px background-color #fbdac7

鋸齒頭發(fā)構(gòu)造

實(shí)現(xiàn):通過transform:skew()將盒子變成平行四邊形,然后通過rotate()將平行四邊形旋轉(zhuǎn)至角朝下,再通過位置調(diào)整,調(diào)整頭發(fā)位置

.hair
 width 35px height 45px background base-color position absolute z-index 1
 transform rotate(70deg) scale(1) skew(44deg) translate(8px) &.hair1
 top 17px left 27px &.hair2 top 8px left 52px &.hair3 top 4px 
left 73px &.hair4 top 0 left 90px &.hair5 top 4px left 108px 
&.hair6 top 8px left 125px &.hair7 top 17px right 17px

脖子

.neck width 20px height 7px border 1px solid #000 background-color #fbdac7 position absolute top 113px left 53px z-index 1

衣服

整體分析:衣服有衣領(lǐng),背帶,怎么讓背帶跟衣領(lǐng)完整的顯示在衣服中,不超過衣服盒子?實(shí)現(xiàn):通過在衣服盒子里設(shè)置overflow:hidden,隱藏超出盒子部分的元素,再通過z-index調(diào)整顯示次序,遮住被衣領(lǐng)蓋住的背帶部分衣領(lǐng)實(shí)現(xiàn):tranform:rotate()旋轉(zhuǎn)至合適位置

.clothes
 width 130px height 130px position absolute border: 1px solid #000 
background-color #ffffff border-radius 36% 36% 0 0 overflow hidden top 
121px z-index 10 .collar /*衣領(lǐng)*/ width 10px height 25px position absolute
 border: 1px solid #000 background-color #fff top -8px z-index 4 
&.left-collar left 35% transform rotate(-40deg) &.right-collar 
right 35% transform rotate(40deg) .straps /*背帶*/ width 10px height 120px
 position absolute background-color #f7003b border: 1px solid #000 top 0
 z-index 3 &.left-straps left 28% &.right-straps right 28% .belt
 /*腰帶*/ width 130px height 10px position absolute background-color 
#f7003b border: 1px solid #000 top 119px z-index 3

雙手構(gòu)造

實(shí)現(xiàn)原理:實(shí)際上是兩個(gè)不同顏色的橢圓,通過顯示次序z-index達(dá)到層疊的效果,最后只露兩邊

.arm-inside
 height 116px width 156px position absolute border: 1px solid #000 
background-color #ffef5e border-radius 61% top 136px left -13px z-index 1
 .arm-outside height 139px width 181px position absolute border: 1px 
solid #000 background-color #fff border-radius 75% top 122px left -25px

裙子構(gòu)造

實(shí)現(xiàn):通過border-radius將裙子下擺削圓,width增加裙子寬度,再通過border-width放大下擺,最設(shè)置transparent,實(shí)現(xiàn)效果裙子皺紋的實(shí)現(xiàn):先定義一個(gè)基線line,其他線再根據(jù)基線進(jìn)行rotate(),再稍微移一下位置,實(shí)現(xiàn)擺放

.skirt
 border-color: #e9003a transparent border-style: solid border-width: 0px
 57px 90px; left: -57px; position: absolute top: 251px width: 132px 
z-index: 5 border-radius: 0 0 50% 50% .line width 2px height 44px 
background-color #000000 position absolute  top 23px left 64px 
transform-origin 0 0 &.line1 transform rotate(20deg) left 11% 
&.line2 transform rotate(8deg) left 30% &.line3 transform 
rotate(0deg) &.line4 transform rotate(-8deg) left 68% &.line5 
transform rotate(-20deg) left 89%

大腿構(gòu)造

.leg width 
20px height 60px position absolute border 1px solid #000 
background-color #fadbc7 top 333px z-index 4 &.left-leg left 32px 
&.right-leg left 80px

襪子構(gòu)造

實(shí)現(xiàn):由兩部分組成foot和sock,sock部分設(shè)置下邊框不顯示,foot部分通過rotate()完成腳方向的設(shè)定

.sock
 width 20px height 28px position absolute background #ffffff 
border-style solid border-width 1px 1px 0px 1px border-color #000000 top
 370px z-index 4 &.left-sock left 32px &.right-sock left 80px 
.foot width 48px height 23px position absolute background-color #ffffff 
border: 1px solid #000 border-radius: 80% top 383px transform-origin 0 0
 z-index 3 &.left-foot transform rotate(-24deg) top 405px left 2px 
&.right-foot transform rotate(24deg) left 86px

鞋構(gòu)造

實(shí)現(xiàn):類似foot,rotate()

.shoe
 width 67px height 34px position absolute background-color #a23030 
border-radius: 80% top 383px transform-origin 0 0 z-index 2 
&.left-shoe transform rotate(-24deg) top 409px left -14px 
&.right-shoe transform rotate(24deg) left 86px

讀到這里，這篇“怎么在stylus下用DIV+CSS打造小丸子”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。