小丸子成长记在stylus下用

福建白癜风医院 https://m.39.net/pf/a_4429412.html
小丸子成长记程序员没有对象怎么办?--new一个呀但是如果没妹妹呢?--跟母猴子生一个呀哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢?最后效果(一直有种错觉这是旺仔???)准备工作npm安装stylus----npminstall-gstylus在项目目录下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css命令行切换至项目目录启动live-server实时刷新--live-server启动stylus,监视wanzi.styl---stylus-wwanzi.styl构造小丸子整体结构先分析下小丸子的构造,小丸子长了:1张脸头发脖子身子,身子上穿了衣服腰上有皮带两只手两条腿,穿了红裙子脚,穿了红鞋所以总体结构就是脸的构造先设置基础样式base-color=#bodyfont-size20pxbody,divmargin0padding0background#ffef5e.borderborder1pxsolidbase-color.mainpositionrelativewidthpxheightpxmargin50pxauto.wanzipositionabsolutetoppxleftpxz-index10脸上有眼睛,耳朵,眉毛,酒窝,还有樱桃嘴.所以可以看出都是嵌套关系,在stylus中表现为脸部基础样式.facebackground#fbdac7widthpxheightpxpositionabsoluteborder1pxsolid#top0left20%border-radius18px40px80px80px眉毛实现原理:设置width,height确定眉毛长度,border-radius确定圆化程度,transform:rotate()确定眉毛摆放倾斜程度.browwidth37pxheight3pxbackgroundbase-colorpositionabsolutetop31pxborder-radius50%.left-browleft13pxtransform:rotate(-13deg).right-browright13pxtransform:rotate(13deg)眼睛实现原理:将盒子用border-radius圆化四角,形成圆形,width和height影响眼睛大小,形状.eyewidth13pxheight13pxborder-radius:50%background#positionabsolutetop45pxz-index2.left-eyeleft30%.right-eyeright30%耳朵实现原理:设置border-radius,width和height影响耳朵大小,形状.earwidth17pxheight26pxpositionabsolutetop30pxbackground-color#fbdac7z-index2.left-earleft-10%border-radius:40%%.right-earright-10%border-radius%69%0酒窝实现原理:设置border-radius,width和height影响酒窝大小,形状.blusherwidth14pxheight14pxborder-radius50%background-color#f79c99positionabsolutetop77pxz-index2.left-blusherleft9%.right-blusherright9%嘴巴实现原理:使用圆角border-radius将盒子弄圆,通过定义伪元素after后的样式,将伪元素背景颜色设置成脸部颜色,达到遮住嘴巴盒子上部分的效果,形成嘴巴的形状.mouthwidth30pxheight27pxborder-radius:79%border:1pxsolid#background-color#epositionabsolutetop62pxleft38%z-index1:aftercontent/*必须要有content属性*/width32pxheight25pxpositionabsolutetop-9pxleft-1pxbackground-color#fbdac7锯齿头发构造实现:通过transform:skew()将盒子变成平行四边形,然后通过rotate()将平行四边形旋转至角朝下,再通过位置调整,调整头发位置.hairwidth35pxheight45pxbackgroundbase-colorpositionabsolutez-index1transformrotate(70deg)scale(1)skew(44deg)translate(8px).hair1top17pxleft27px.hair2top8pxleft52px.hair3top4pxleft73px.hair4top0left90px.hair5top4pxleftpx.hair6top8pxleftpx.hair7top17pxright17px脖子.neckwidth20pxheight7pxborder1pxsolid#background-color#fbdac7positionabsolutetoppxleft53pxz-index1衣服整体分析:衣服有衣领,背带,怎么让背带跟衣领完整的显示在衣服中,不超过衣服盒子?实现:通过在衣服盒子里设置overflow:hidden,隐藏超出盒子部分的元素,再通过z-index调整显示次序,遮住被衣领盖住的背带部分衣领实现:tranform:rotate()旋转至合适位置.clotheswidthpxheightpxpositionabsoluteborder:1pxsolid#background-color#ffffffborder-radius36%36%00overflowhiddentoppxz-index10.collar/*衣领*/width10pxheight25pxpositionabsoluteborder:1pxsolid#background-color#ffftop-8pxz-index4.left-collarleft35%transformrotate(-40deg).right-collarright35%transformrotate(40deg).straps/*背带*/width10pxheightpxpositionabsolutebackground-color#fbborder:1pxsolid#top0z-index3.left-strapsleft28%.right-strapsright28%.belt/*腰带*/widthpxheight10pxpositionabsolutebackground-color#fbborder:1pxsolid#toppxz-index3双手构造实现原理:实际上是两个不同颜色的椭圆,通过显示次序z-index达到层叠的效果,最后只露两边.arm-insideheightpxwidthpxpositionabsoluteborder:1pxsolid#background-color#ffef5eborder-radius61%toppxleft-13pxz-index1.arm-outsideheightpxwidthpxpositionabsoluteborder:1pxsolid#background-color#fffborder-radius75%toppxleft-25px裙子构造实现:通过border-radius将裙子下摆削圆,width增加裙子宽度,再通过border-width放大下摆,最设置transparent,实现效果裙子皱纹的实现:先定义一个基线line,其他线再根据基线进行rotate(),再稍微移一下位置,实现摆放.skirtborder-color:#eatransparentborder-style:solidborder-width:0px57px90px;left:-57px;position:absolutetop:pxwidth:pxz-index:5border-radius:%50%.linewidth2pxheight44pxbackground-color#positionabsolutetop23pxleft64pxtransform-origin00.line1transformrotate(20deg)left11%.line2transformrotate(8deg)left30%.line3transformrotate(0deg).line4transformrotate(-8deg)left68%.line5transformrotate(-20deg)left89%大腿构造.legwidth20pxheight60pxpositionabsoluteborder1pxsolid#background-color#fadbc7toppxz-index4.left-legleft32px.right-legleft80px袜子构造实现:由两部分组成foot和sock,sock部分设置下边框不显示,foot部分通过rotate()完成脚方向的设定.sockwidth20pxheight28pxpositionabsolutebackground#ffffffborder-stylesolidborder-width1px1px0px1pxborder-color#toppxz-index4.left-sockleft32px.right-sockleft80px.footwidth48pxheight23pxpositionabsolutebackground-color#ffffffborder:1pxsolid#border-radius:80%toppxtransform-origin00z-index3.left-foottransformrotate(-24deg)toppxleft2px.right-foottransformrotate(24deg)left86px鞋构造实现:类似foot,rotate().shoewidth67pxheight34pxpositionabsolutebackground-color#aborder-radius:80%toppxtransform-origin00z-index2.left-shoetransformrotate(-24deg)toppxleft-14px.right-shoetransformrotate(24deg)left86px总结使用stylus,大大提高了效率,非常nice!

转载请注明：http://www.tzjhsl.com/zwqc/700004.html