在stylus下用DIV+CSS一步一步打造小丸子

1、在stylus下用div+css一步一步打造小丸子小丸子成長(zhǎng)記今日小編給大家展示一下怎么用stylus打造一個(gè)天真爛漫的小丸子。預(yù)備工作 npm安裝stylus-npm install -g stylus 在項(xiàng)目名目下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css 指令行切換至項(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張臉 頭發(fā) 頸項(xiàng) 身子,身子上穿了衣服 腰上有皮帶 兩只手

2、兩條腿,穿了紅裙子 腳,穿了紅鞋 所以總體結(jié)構(gòu)就是臉的構(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 width1000px height 1000px margin 50px auto.wanzi position absolute top 250pxleft 100px z-index 10臉上有眼睛,耳朵,眉毛,酒窩,還有櫻桃嘴.所以可

3、以看出都是嵌套關(guān)系,在stylus中表現(xiàn)為臉部基礎(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

4、 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

5、&.left-eye left 30% &.right-eyeright 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è)置bo

6、rder-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將盒子弄圓,通過(guò)定義偽元素after后的樣式,將偽元素背景色彩設(shè)置成臉部色彩,達(dá)到遮住嘴巴盒子上部分的效果,形成嘴巴的外形 .mouth width

7、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 25pxposition absolute top -9px left -1px background-color fbdac7鋸齒頭發(fā)構(gòu)造實(shí)現(xiàn):通過(guò)transform:skew()將盒子變成平行四邊形,然后通過(guò)rotate()將平行

8、四邊形旋轉(zhuǎn)至角朝下,再通過(guò)位置調(diào)節(jié),調(diào)節(jié)頭發(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 4p

9、x left 108px&.hair6 top 8px left 125px &.hair7 top 17px right 17px頸項(xiàng).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)完整的顯示在衣服中,不超過(guò)衣服盒子?實(shí)現(xiàn):通過(guò)在衣服盒子里設(shè)置overflow:hidden,躲藏超出盒子部分的元素,再通過(guò)z-index調(diào)節(jié)顯示次序,遮住被衣

10、領(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 top121px z-index 10 .collar /*衣領(lǐng)*/ width 10px height 25px position absolute border: 1px solid 000 background-color fff top

11、-8px z-index 4 &.left-collar left 35% transform rotate(-40deg) &.right-collarright 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

12、/*腰帶*/ 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è)不同色彩的橢圓,通過(guò)顯示次序z-index達(dá)到層疊的效果,最后只露兩邊.arm-inside height 116px width 156px position absolute border: 1px solid 000 background-color ffef5e border-radius 61% top 136px left -1

13、3px 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):通過(guò)border-radius將裙子下擺削圓,width增強(qiáng)裙子寬度,再通過(guò)border-width放大下擺,最設(shè)置transparent,實(shí)現(xiàn)效果裙子皺紋的實(shí)現(xiàn):先定義一個(gè)基線line,其他線再按照基線舉行rotate(),再略微移一下位置,實(shí)現(xiàn)擺放.skirt border-co

14、lor: 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 44pxbackground-color 000000 position absolute top 23px left 64pxtransform-origin 0 0 &.line1 transform rot

15、ate(20deg) left 11%&.line2 transform rotate(8deg) left 30% &.line3 transformrotate(0deg) &.line4 transform rotate(-8deg) left 68% &.line5transform rotate(-20deg) left 89%大腿構(gòu)造.leg width20px height 60px position absolute border 1px solid 000background-color fadbc7 top 333px z-index 4 &

16、amp;.left-leg left 32px&.right-leg left 80px襪子構(gòu)造實(shí)現(xiàn):由兩部分組成foot和sock,sock部分設(shè)置下邊框不顯示,foot部分通過(guò)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

17、-sock left 80px .foot width 48px height 23px position absolute background-color ffffffborder: 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