小丸子成长记
程序员没有对象怎么办?
--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!