你的位置:首页 > 网页设计

[网页设计][css]我要用css画幅画(三)


接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明。

 

以下只列出本次修改增加的内容 

html如下:

1 <div class="human left-190 bottom-25">2     <p class="lines">大家好,我叫小明</p>3     <div class="human-head-normal"></div>4     <div class="human-body-normal"></div>5     <div class="human-arms-normal"></div>6     <div class="human-legs-normal"></div>7   </div>

human

 

css如下:

 1 .left-190 { 2   left: 190px; 3 } 4  5 .bottom-25 { 6   bottom: 25px; 7 } 8  9 .human {10   height:170px;11   width: 120px;12 13   position: absolute;14 }15 16 .lines {17   position: absolute;18   top: -20px;19   width: 220px;20   display: block;21 }22 23 .human-head-normal {24   border: 2px solid #000;25   height: 40px;26   width: 40px;27   border-radius: 50%;28   position: absolute;29   top: 20px;30   left: 35px;31 }32 .human-body-normal {33   height: 60px;34   width: 3px;35   background: #000;36   left: 55px;37   top: 62px;38   position: absolute;39 }40 41 .human-arms-normal {42   width: 80px;43   height: 3px;44   position: absolute;45   background: #000;46   left: 18px;47   top: 75px;48 }49 50 .human-legs-normal {51   height:50px;52   width: 50px;53   border: 3px solid #000;54   border-bottom: none;55   border-right: none;56   position: absolute;57   left: 55px;58   top: 120px;59 60   -webkit-transform: rotate(45deg);61   -webkit-transform-origin: 1px 1px;62 }

human.css

 

下面是code pen中的效果:  Sun-house-human

或者你可以直接看github上的demo效果: http://bee0060.github.io/Css-Paint/pages/sun-house-3.html

代码已经上传github:https://github.com/bee0060/Css-Paint 

 

 这里用到了以下这个陌生的css:

-webkit-transform-origin: 1px 1px;

 

之前两篇有用到transform,也对transform-origin做了一些猜测,但是并没有亲身试验过。这次终于实际用到了。

 

transform-origin属性用于设置变形的原点,变形将会基于原点进行。

相关的MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

该属性的默认值是:

-webkit-transform-origin: 50% 50% 0;

也就是对象的重心位置。

 

第一个参数描述原点在对象上的横向位移(下文简称x), 第二个参数是纵向位移(下文简称y),第三个参数还不太理解,应该是垂直偏移值(即立体几何中的z轴坐标),文档上的原话是:定义变形中心距离用户视线(z=0处)的<length>(不能是<percentage>)偏移值。

 

前两个参数均接受以下类型的值:

1. 长度,即上面说的<length>, 如1px、1em、1pt等, 但是不接受仅用数字作为值, 如1。

2. 百分比,即上面说的<percentage>, 如50%。

3. 位置描述符, 包括left、right、top、bottom和center。

  其中x可以使用left、right和center, y可以使用top、bottom和center。

  当x和y都使用位置描述符,参数位置可以不按顺序,即以下两种都是允许的:

    -webkit-transform-origin: left top;

    -webkit-transform-origin: top left;

  浏览器会自动识别出x和y的对应描述符。但若不是两个参数都使用位置描述符时, 就需要严格按照x和y的位置, 且位置描述符不可以出现矛盾的情况,如以下几种写法都会被认为是无效的:

    -webkit-transform-origin: top 2px;

    -webkit-transform-origin: left right;

 

  为了避免不必要的麻烦, 建议还是严格按照参数的位置进行书写比较好。

 

从上面的例子中,可以看出,前两个参数允许接受不同类型的值,如一个用位置描述符另一个用百分比。

另外,transform-origin属性设置1-3个参数都是可以的。

 

今天就到这,谢谢观看。 如有错误,欢迎指正。

 

PS-1:  原本我是根据个人猜测,写了对transform-origin属性的说明,结果一对照文档,发现大错特错,没法,为了避免误导,只好重写了一遍。

PS-2: 我画完小人后,和老婆说这幅画算是画完了,但她说,她小时候画这种画,至少还要有云啊、大树啊、栏杆啊……。 对于这种“需求”,我只能说一句:“臣妾做不到啊!” 云和大树,光想想都觉得超出我的能力范围了。 现在就只画个小人吧。以后还要加些啥,就纯看灵感和兴趣了。