小丸子成长记

程序员没有对象怎么办?

--new 一个呀

但是如果没妹妹呢?

--跟母猴子生一个呀

哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢?

最后效果(一直有种错觉这是旺仔???)

准备工作

npm安装stylus---->npm install -g stylus

在项目目录下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css

命令行切换至项目目录

启动live-server实时刷新 -->live-server

启动stylus,监视wanzi.styl--->stylus -w wanzi.styl

构造小丸子整体结构

先分析下小丸子的构造,小丸子长了:

1张脸

头发

脖子

身子,身子上穿了衣服

腰上有皮带

两只手

两条腿,穿了红裙子

脚,穿了红鞋

所以总体结构就是

脸的构造

先设置基础样式

base-color = #152131

body

font-size 20px

body, 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

脸上有眼睛,耳朵,眉毛,酒窝,还有樱桃嘴.所以可以看出都是嵌套关系,在stylus中表现为

脸部基础样式

.face

background #fbdac7

width 126px

height 113px

position absolute

border 1px solid #000

top 0

left 20%

border-radius 18px 40px 80px 80px

眉毛

实现原理:设置width,height确定眉毛长度,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)

眼睛

实现原理:将盒子用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%

耳朵

实现原理:设置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

酒窝

实现原理:设置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%

嘴巴

实现原理:使用圆角border-radius将盒子弄圆,通过定义伪元素after后的样式,将伪元素背景颜色设置成脸部颜色,达到遮住嘴巴盒子上部分的效果,形成嘴巴的形状

.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

锯齿头发构造

实现:通过transform:skew()将盒子变成平行四边形,然后通过rotate()将平行四边形旋转至角朝下,再通过位置调整,调整头发位置

.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

衣服

整体分析:衣服有衣领,背带,怎么让背带跟衣领完整的显示在衣服中,不超过衣服盒子?

实现:通过在衣服盒子里设置overflow:hidden,隐藏超出盒子部分的元素,再通过z-index调整显示次序,遮住被衣领盖住的背带部分

衣领实现:tranform:rotate()旋转至合适位置

.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 /*衣领*/

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

双手构造

实现原理:实际上是两个不同颜色的椭圆,通过显示次序z-index达到层叠的效果,最后只露两边

.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

裙子构造

实现:通过border-radius将裙子下摆削圆,width增加裙子宽度,再通过border-width放大下摆,最设置transparent,实现效果

裙子皱纹的实现:先定义一个基线line,其他线再根据基线进行rotate(),再稍微移一下位置,实现摆放

.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%

大腿构造

.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

袜子构造

实现:由两部分组成foot和sock,sock部分设置下边框不显示,foot部分通过rotate()完成脚方向的设定

.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

鞋构造

实现:类似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,大大提高了效率,非常nice!