其实还有一个TODO List,所以下面的css3的属性可能

作者: 前端  发布:2019-08-28

[css]我要用css画幅画(四),css幅画

接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静。

 

github: , 完整代码在pages/sun-house-4.html和相关的css中可以找到

demo: 

 

完整html如下:

9159.com 1 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 </head> 11 <body> 12 <div class="sun"> 13 <div class="sun-body"></div> 14 <div class="sun-shine-light sun-shine-light1"></div> 15 <div class="sun-shine-light sun-shine-light2"></div> 16 <div class="sun-shine-light sun-shine-light3"></div> 17 <div class="sun-shine-light sun-shine-light4"></div> 18 <div class="sun-shine-light sun-shine-light5"></div> 19 </div> 20 21 <div class="house-width house"> 22 <div class="house-width house-roof house-roof-left"></div> 23 <div class="house-width house-roof house-roof-right"></div> 24 <div class="house-width house-wall"> 25 26 <div class="house-wall-door"> 27 28 <div class="house-wall-door-handle"></div> 29 </div> 30 </div> 31 </div> 32 33 <div class="human human-pos-1"> 34 <p class="lines">大家好,我叫小明</p> 35 <div class="human-head-normal"></div> 36 <div class="human-body-normal"></div> 37 <div class="human-arms-normal"></div> 38 <div class="human-legs-normal"></div> 39 </div> 40 41 <div class="human human-pos-2"> 42 <p class="lines">大家好,我叫静静</p> 43 <div class="human-head-normal"></div> 44 <div class="human-body-normal"></div> 45 <div class="human-arms-normal"></div> 46 <div class="human-legs-1"></div> 47 </div> 48 49 <div class="cloud cloud-pos cloud-pos-1"> 50 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 51 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 52 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 53 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 54 </div> 55 <div class="cloud cloud-pos cloud-pos-2"> 56 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 57 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 58 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 59 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 60 </div> 61 62 63 </body> 64 </html> Html

 

本次对human.css做了一些改动,主要增加了如下内容:

9159.com 2 1 .human-pos-1 { 2 left: 250px; 3 bottom: 25px; 4 } 5 6 .human-pos-2 { 7 left: 40px; 8 bottom: 60px; 9 } 10 11 .human-legs-1 { 12 border: 3px solid #000; 13 border-bottom: none; 14 border-right: none; 15 height:50px; 16 left: 55px; 17 position: absolute; 18 top: 120px; 19 width: 50px; 20 21 -webkit-transform: rotate(-2deg); 22 -webkit-transform-origin: 1px 1px; 23 } human.css改动

 

云的css如下:

9159.com 3 1 .cloud{ 2 height: 150px; 3 width: 250px; 4 } 5 6 .cloud-pos { 7 position: absolute; 8 } 9 10 .cloud-pos-1 { 11 left: 35%; 12 top: 25px; 13 } 14 15 .cloud-pos-2 { 16 left: 60%; 17 top: 25px; 18 } 19 20 .cloud-bg { 21 background-color: skyBlue; 22 } 23 24 .cloud-border { 25 border: 2px solid #000; 26 } 27 28 .cloud-top { 29 border-radius: 100%; 30 border-width: 0px; 31 height: 100px; 32 left: 50%; 33 margin-left:-75px; 34 width: 150px; 35 } 36 37 .cloud-left { 38 border-radius: 100%; 39 border-width: 0px; 40 height: 100px; 41 margin-top: -50px; 42 top: 60%; 43 width: 100px; 44 } 45 46 .cloud-right { 47 border-radius: 100%; 48 border-width: 0px; 49 height: 100px; 50 margin-top: -50px; 51 right:0; 52 top: 60%; 53 width: 100px; 54 } 55 .cloud-bottom { 56 border-radius: 100%; 57 border-width: 0px; 58 height: 100px; 59 left:53%; 60 margin-left: -75px; 61 margin-top: -50px; 62 top: 65%; 63 width: 150px; 64 } cloud.css

9159.com, 

这里并没有用到什么陌生的css,一个发现是,原来还有skyBlue这个颜色。 

这里的云是由四个形状不一的圆组成, 主要用了圆角属性和位置属性。

 

在画完后,也特意查了以下MDN中border-radius的详细介绍,加深了解,这里奉上MDN的文档链接(内容较多,再转述觉得多余,也担心造成误导,直接看文档可能更好):

非常详细,发现自己以前用的还是比较浅的。

 

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

 

PS: 这次去掉了code pen的demo,因为code pen每次都要把多个css文件中的代码逐个复制进去,比较麻烦。 但如果看官觉得有code pen看起来效果更好,可以留言告诉我,我再加回去。

 

接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静。 github:http...

[css]我要用css画幅画(六),css幅画

接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧。 本次的更新包括:

  1. 给云增加动画

  2. 画了一棵树

  3. 树上画了一个苹果,并给苹果增加坠落的动画

 

其实还有一个TODO List, 不过这个List没有也可以算完成,所以这个List可能会无限期搁置:

  1. 苹果坠落前左右摇晃一下

  2. 苹果落地后滚动几圈

 

那么进入正题。

 

github: 

demo: 

 

完整html如下:

9159.com 4 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../../css/sun-house/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../../css/sun-house/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../../css/sun-house/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud.css" /> 10 <link rel="stylesheet" type="text/css" href="../../css/sun-house/tree.css"> 11 <link rel="stylesheet" type="text/css" href="../../css/sun-house/apple.css"> 12 13 <link rel="stylesheet" type="text/css" href="../../css/sun-house/human-animate.css" /> 14 <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud-animate.css" /> 15 16 <script type="text/javascript" src="js/analysis.js"></script> 17 </head> 18 <body> 19 <div class="sun"> 20 <div class="sun-body"></div> 21 <div class="sun-shine-light sun-shine-light1"></div> 22 <div class="sun-shine-light sun-shine-light2"></div> 23 <div class="sun-shine-light sun-shine-light3"></div> 24 <div class="sun-shine-light sun-shine-light4"></div> 25 <div class="sun-shine-light sun-shine-light5"></div> 26 </div> 27 28 <div class="house-width house"> 29 <div class="house-width house-roof house-roof-left"></div> 30 <div class="house-width house-roof house-roof-right"></div> 31 <div class="house-width house-wall"> 32 <div class="house-wall-door"> 33 <div class="house-wall-door-handle"></div> 34 </div> 35 </div> 36 </div> 37 38 <div class="human human-pos-1"> 39 <p class="lines human-speak">大家好,我叫小明。</p> 40 <p class="lines human-speak human-speak-delay-3">我是一个程序员,最喜欢宅在家里LOL。</p> 41 <p class="lines human-speak human-speak-delay-12">静静,我们交个朋友好吗?我的电话是13800123456。</p> 42 <div class="human-head-normal"></div> 43 <div class="human-body-normal"></div> 44 <div class="human-arms-normal"></div> 45 <div class="human-legs-normal"></div> 46 </div> 47 48 <div class="human human-pos-2"> 49 <p class="lines human-speak human-speak-delay-6">大家好,我叫静静</p> 50 <p class="lines human-speak human-speak-delay-9">和大家看到的一样,我热爱舞蹈。</p> 51 <p class="lines human-speak human-speak-delay-15">不要,程序员什么的最讨厌了!</p> 52 <div class="human-head-normal"></div> 53 <div class="human-body-normal"></div> 54 <div class="human-arms-normal"></div> 55 <div class="human-legs-1"></div> 56 </div> 57 58 <div class="cloud cloud-pos cloud-pos-1 cloud-animate-1"> 59 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 60 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 61 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 62 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 63 </div> 64 <div class="cloud cloud-pos cloud-pos-2 cloud-animate-2"> 65 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 66 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 67 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 68 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 69 </div> 70 71 <div class="tree"> 72 <div class="tree-top"> 73 <div class="tree-crowwn tree-crowwn-left"></div> 74 <div class="tree-crowwn tree-crowwn-top"></div> 75 <div class="tree-crowwn tree-crowwn-right"></div> 76 <div class="tree-crowwn tree-crowwn-bottom"></div> 77 </div> 78 <div class="tree-middle"> 79 <div class="tree-trunk"></div> 80 </div> 81 <div class="tree-bottom"> 82 <div class="tree-root tree-root-left"></div> 83 <div class="tree-root tree-root-middle"></div> 84 <div class="tree-root tree-root-right"></div> 85 </div> 86 </div> 87 <!-- TODO: 1.苹果左右震动一下再下跌 88 2.苹果跌下来后向左滚动几圈 --> 89 <div class="apple"> 90 <div class="apple-body apple-left"></div> 91 <div class="apple-body apple-right"></div> 92 <div class="apple-stalk"></div> 93 </div> 94 </body> 95 </html> View Code

 增加的css如下:

9159.com 5 1 .cloud-animate-1 { 2 -webkit-animation-duration: 20s; 3 -webkit-animation-name: cloudMove-1; 4 -webkit-animation-iteration-count: infinite; 5 -webkit-animation-direction: alternate; 6 } 7 8 .cloud-animate-2 { 9 -webkit-animation-duration: 20s; 10 -webkit-animation-name: cloudMove-2; 11 -webkit-animation-iteration-count: infinite; 12 -webkit-animation-direction: alternate; 13 } 14 15 @-webkit-keyframes cloudMove-1 { 16 25% { 17 top : 10px; 18 } 19 20 50% { 21 top: 50px; 22 } 23 24 75% { 25 top: 20px; 26 } 27 28 to { 29 left: 10% 30 } 31 } 32 33 @-webkit-keyframes cloudMove-2 { 34 25% { 35 top : 30px; 36 } 37 38 50% { 39 top: 80px; 40 } 41 42 75% { 43 top: 10px; 44 } 45 46 to { 47 left: 85% 48 } 49 } could-animate 9159.com 6 1 .tree{ 2 bottom: 10px; 3 height: 700px; 4 position: absolute; 5 right: 120px; 6 width: 500px; 7 } 8 9 .tree-crowwn { 10 background-color: green; 11 border-radius: 50%; 12 position: absolute; 13 z-index: 2; 14 } 15 16 .tree-crowwn-left { 17 height: 250px; 18 top: 150px; 19 width: 250px; 20 } 21 22 .tree-crowwn-top { 23 height: 320px; 24 left: 100px; 25 width: 320px; 26 } 27 28 .tree-crowwn-right { 29 height: 250px; 30 left: 250px; 31 top: 150px; 32 width: 250px; 33 } 34 35 .tree-crowwn-bottom { 36 height: 120px; 37 left: 150px; 38 top: 270px; 39 width: 200px; 40 } 41 42 .tree-trunk { 43 background-color: #5d2323; 44 height: 280px; 45 left: 170px; 46 position: absolute; 47 top: 350px; 48 width: 180px; 49 z-index: 1; 50 } 51 52 .tree-bottom { 53 position: absolute; 54 top: 630px; 55 } 56 57 .tree-root { 58 background-color: #503333; 59 height: 30px; 60 position: absolute; 61 width: 20px; 62 } 63 64 .tree-root-left { 65 left: 170px; 66 -webkit-transform: matrix(1, 0, -0.5, 1, 0, 0); 67 -webkit-transform-origin: right top; 68 } 69 70 .tree-root-middle { 71 left: 250px; 72 -webkit-transform: matrix(1, 0, -0.1, 1, 0, 0); 73 } 74 75 .tree-root-right { 76 left: 330px; 77 -webkit-transform: matrix(1, 0, 0.5, 1, 0, 0); 78 -webkit-transform-origin: left top; 79 } tree 9159.com 7 1 .apple { 2 bottom: 360px; 3 height: 60px; 4 position: absolute; 5 right: 480px; 6 width: 60px; 7 z-index: 3; 8 9 -webkit-animation-duration: 1.5s; 10 -webkit-animation-delay: 18s; 11 -webkit-animation-name: appleDrop; 12 -webkit-animation-timing-function: cubic-bezier(0.5, 0.1, 0.85, 0.3); 13 -webkit-animation-fill-mode: forwards; 14 } 15 16 .apple-body { 17 background-color: #ff3300; 18 border-radius: 75% 75% 90% 90%; 19 height: 50px; 20 position: absolute; 21 width: 37px; 22 z-index: 3; 23 } 24 25 .apple-left { 26 27 } 28 29 .apple-right { 30 right:2px; 31 } 32 33 .apple-stalk { 34 border: none; 35 border-radius: 100%; 36 border-right: 3px solid #000; 37 height:20px; 38 left: 8px; 39 position: absolute; 40 top:-10px; 41 width:20px; 42 z-index: 2; 43 } 44 45 @-webkit-keyframes appleDrop{ 46 from{ 47 48 } 49 20%{ 50 51 } 52 80%{ 53 54 } 55 to{ 56 bottom: 35px; 57 } 58 } apple

 

这里用到的陌生的css属性包括(直接附上相关的MDN文档链接):

  1. animation-iteration-count - 代表动画执行的次数,默认值为1。值可以是非负整数或infinite关键字, infinite表示执行无数次。

 

2. animation-direction - 代表关键帧的运行方向,默认值为normal。 可选的值共包括:

  • normal:正向执行,顺序为从from(0%)执行到to(100%)。
  • reverse: 反向执行,顺序为从to(100%)执行到from(0%)。
  • alternate: 先正向执行再反向执行,也可以理解为奇数次时正向执行, 偶数次时反向执行。
  • alternate-reverse: 和alternate相反,先反向执行再正向执行。

 

3. animation-timing-function - MDN文档说该属性用于定义动画在周期中执行的节奏,我的理解是用于定义动画中帧之间属性的变化速率。 默认值是ease(缓动-先加速再减速)。

  通常可以用简写来指定, 常用的简写有缓动(ease,ease-in,ease-out,ease-in-out)和匀速(linear)。 除了关键字外,还有稍微特殊的设置:

  • steps : 语法为 steps(N, target) , N为正整数, target为目标,可以设置start或end(其他值没试过,文档中也没提到)。 意思就是, 不匀速的分N次到达start。 这里举个栗子
  • cubic-bezier: 贝塞尔曲线,语法为 cubic-bezier(x1, y1, x2, y2), 其中四个参数都是小数,可以为负数。 通过x和y坐标,定出2个点,通过这两个点,描述一个变化曲线。还没深入研究过,这里暂不多谈。前面的链接是百度百科的,有兴趣可以看看。今天搜到一个不错的网站,可以用来感受一下贝塞尔曲线在动画上的实际效果: 。 平时写动画时也可以借助这个网站,不用辛苦的调半天数字。

  想深入了解这个属性,建议找找更深入的文章,这里只是浅尝辄止  :)

 

4. animation-fill-mode - 用于声明动画执行结束后的目标样式,默认值为none。该值受animation-direction和 animation-iteration-count值的影响。 若animation-iteration-count的值是infinite,动画不会结束,则该属性无效。

  可选值包括:

  none - 动画结束后,不采用动画关键帧设置的样式。

  forward - 采用动画最后一帧时的样式

  backward - 采用动画第一帧时的样式

  both - 同时采用动画第一帧和最后一帧时的样式。 但值有冲突的属性不知道会如何处理。

  关键帧的设置中,第一帧不一定是from(0%),最后一帧并不一定是to(100%), 具体情况如下表,以下表格是我翻译MDN中得来的:

animation-direction animation-iteration-count 第一帧 最后一帧
normal 任何值 0% or from 100% or to
reverse 任何值 100% or to 0% or from
alternate 偶数 0% or from 0% or from
alternate 奇数 0% or from 100% or to
alternate-reverse 偶数 100% or to 100% or to
alternate-reverse 奇数 100% or to 0% or from

 

 

 

 

 

 

 

 

PS: 以上四个属性和animation-name一样,都可以以逗号分隔设置多个值,每个值用于描述animation-name中相同位置的动画规则。animation-name,关键帧的简要信息可以查看[css]我要用css画幅画(五)

 

说完基础, 说下我是怎么画的。

  1. 云的飘动: 用animation-direction设置动画会来回执行,用animation-iteration-count设置无限次执行。

  2. 树: 用四个圆形组成树冠, 矩形组成树干, 3个倾斜的矩形组成3个树根。

  3. 苹果: 用两个圆形组成苹果的果肉部分,用一个原型的div的border-right画出苹果的梗。 用animation-delay设置延迟执行动画, 用animation-timing-function让下落模仿自由落体的加速度, 用animation-fill-mode让苹果落地后停在那里。

 

好了, 今天就到这里, 这幅sun-house的画也告一段落。 以后再看看画些啥吧。 谢谢阅读。

 

转载请注明出处:[css]我要用css画幅画(六)

 

接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这...

[css]我要用css画幅画(二),css幅画

接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶、墙壁、门。

 

现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀。 我只是为了兴趣画画, 何必理会兼容性呢,是吧? 

 

html如下:

9159.com 8 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="css/house.css" /> 8 </head> 9 <body> 10 <div class="sun"> 11 <div class="sun-body"></div> 12 <div class="sun-shine-light sun-shine-light1"></div> 13 <div class="sun-shine-light sun-shine-light2"></div> 14 <div class="sun-shine-light sun-shine-light3"></div> 15 <div class="sun-shine-light sun-shine-light4"></div> 16 <div class="sun-shine-light sun-shine-light5"></div> 17 </div> 18 19 <div class="house-width house"> 20 <div class="house-width house-roof house-roof-left"></div> 21 <div class="house-width house-roof house-roof-right"></div> 22 <div class="house-width house-wall"> 23 24 <div class="house-wall-door"> 25 26 <div class="house-wall-door-handle"></div> 27 </div> 28 </div> 29 </div> 30 </body> 31 </html> View Code

 

css如下:

(原来的sun.css)

9159.com 9 1 .sun{ 2 position: relative; 3 } 4 5 .sun-body{ 6 background-color: red; 7 border-radius: 50%; 8 height: 300px; 9 left: -100px; 10 position: absolute; 11 top: -100px; 12 width: 300px; 13 z-index: 9; 14 } 15 .sun-shine-light{ 16 background-color: yellow; 17 height: 5px; 18 left:250px; 19 margin-top:30px; 20 position: relative; 21 width: 300px; 22 z-index:10; 23 } 24 .sun-shine-light1{ 25 -webkit-transform: rotate(-3deg); 26 -moz-webkit-transform: rotate(-3deg); 27 -ms-webkit-transform: rotate(-3deg); 28 -o-webkit-transform: rotate(-3deg); 29 } 30 .sun-shine-light2{ 31 top: 70px; 32 left: 240px; 33 -webkit-transform: rotate(10deg); 34 -moz-webkit-transform: rotate(10deg); 35 -ms-webkit-transform: rotate(10deg); 36 -o-webkit-transform: rotate(10deg); 37 } 38 .sun-shine-light3{ 39 top: 160px; 40 left: 195px; 41 -webkit-transform: rotate(30deg); 42 -ms-transform: rotate(30deg); 43 -o-transform: rotate(30deg); 44 transform: rotate(30deg); 45 } 46 .sun-shine-light4{ 47 top: 215px; 48 left: 85px; 49 width: 260px; 50 -webkit-transform: rotate(55deg); 51 -ms-transform: rotate(55deg); 52 -o-transform: rotate(55deg); 53 transform: rotate(55deg); 54 } 55 .sun-shine-light5{ 56 top: 200px; 57 left: -50px; 58 width: 230px; 59 -webkit-transform: rotate(85deg); 60 -ms-transform: rotate(85deg); 61 -o-transform: rotate(85deg); 62 transform: rotate(85deg); 63 } sun.css

(新增的house.css)

9159.com 10 1 .house-width { 2 width: 600px; 3 } 4 5 .house { 6 bottom: 20px; 7 height: 400px; 8 left: 600px; 9 position: absolute; 10 } 11 12 .house-roof { 13 background: gold; 14 border: 3px solid #000; 15 left: -30px; 16 height: 180px; 17 position: relative; 18 } 19 20 .house-roof-left { 21 border-left-width: 15px; 22 float: left; 23 -webkit-transform: matrix(0.25, 0, -0.4, 1, -298, 0); 24 } 25 26 .house-roof-right { 27 -webkit-transform: matrix(1, 0, 0.3, 1, 0, 0); 28 } 29 30 .house-wall { 31 border: 2px solid #000; 32 height: 220px; 33 } 34 .house-wall::before{ 35 border: 2px solid #000; 36 height: 220px; 37 width:130px; 38 content:''; 39 left: -133px; 40 top: 186px; 41 position: absolute; 42 display: block; 43 } 44 45 .house-wall-door { 46 background: orange; 47 bottom: 0px; 48 height: 180px; 49 left: 110px; 50 position: absolute; 51 width: 110px; 52 } 53 54 .house-wall-door-handle { 55 background: brown; 56 border: 1px solid #000; 57 border-radius: 50%; 58 height: 15px; 59 position: absolute; 60 right: 10px; 61 top: 90px; 62 width:15px; 63 } house.css

 

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

 

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

-webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);  (由于任性的我只兼容chrome, 所以这里都带有-webkit前缀, 如果你要在FIREFOX下用,就改成-moz-前缀吧)

 

matrix, 我在画屋顶时用到它,matrix是用于画矩形的。

matrix的MDN文档在此:

另外,你可以在这里试验这个属性不同参数下的表现:

 

matrix接受6个参数, 这六个参数均接受正负小数:

  1. 表示宽度的变性比例, 1表示100%,即不变, 0.25表示只有原本的25%。

2. 我的猜测是:表示以原点为基准,原点左边向上倾斜变形、原点右边向下倾斜变形的数值,这个数值是倾斜变形角度的正切函数的值,也就是当你输入1的时候,会顺时针倾斜45度,因为tan45 = 1。或者叫做倾斜的斜率。

3. 我的猜测是:表示以原点为基准,原点之上向左倾斜变形、原点之下向右倾斜变形的斜率。 该数值越大,倾斜变形越严重。

4.表示高度的变性比例, 1表示100%,即不变, 0.25表示只有原本的25%。

5.表示横向位移的像素值, 该参数只接受数字,不需要填写单位(px)。当你写100时,就向左平移了100px。 也可以输入负数。

6.表示纵向位移的像素值, 其他同上。

 

上面提到的“原点”, 可以通过transform-origin属性进行设置,若未设置,应该是对象的重心。

 

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

 

 

 

接着之前的[css]我要用css画幅画(一), 今天,我又画一个房子,很简单,屋顶、墙壁、门。 现在开始,做...

[css]我要用css画幅画(一),css幅画

几年前开始就一直想用css画幅画。

今天才真正开始, 从简单的开始。

 

作为一个工作压力那么大的程序员,我首先要画一个太阳。

html如下:

9159.com 11 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="sun"> 10 <div class="sun-body"></div> 11 <div class="sun-shine-light sun-shine-light1"></div> 12 <div class="sun-shine-light sun-shine-light2"></div> 13 <div class="sun-shine-light sun-shine-light3"></div> 14 <div class="sun-shine-light sun-shine-light4"></div> 15 <div class="sun-shine-light sun-shine-light5"></div> 16 </div> 17 </body> 18 </html> View Code

 

css如下:

9159.com 12 1 .sun{ 2 position: relative; 3 } 4 5 .sun-body{ 6 background-color: red; 7 border-radius: 50%; 8 height: 300px; 9 left: -100px; 10 position: absolute; 11 top: -100px; 12 width: 300px; 13 z-index: 9; 14 } 15 .sun-shine-light{ 16 background-color: yellow; 17 height: 5px; 18 left:250px; 19 margin-top:30px; 20 position: relative; 21 width: 300px; 22 z-index:10; 23 } 24 .sun-shine-light1{ 25 -webkit-transform: rotate(-3deg); 26 -moz-webkit-transform: rotate(-3deg); 27 -ms-webkit-transform: rotate(-3deg); 28 -o-webkit-transform: rotate(-3deg); 29 } 30 .sun-shine-light2{ 31 top: 70px; 32 left: 240px; 33 -webkit-transform: rotate(10deg); 34 -moz-webkit-transform: rotate(10deg); 35 -ms-webkit-transform: rotate(10deg); 36 -o-webkit-transform: rotate(10deg); 37 } 38 .sun-shine-light3{ 39 top: 160px; 40 left: 195px; 41 -webkit-transform: rotate(30deg); 42 -ms-transform: rotate(30deg); 43 -o-transform: rotate(30deg); 44 transform: rotate(30deg); 45 } 46 .sun-shine-light4{ 47 top: 215px; 48 left: 85px; 49 width: 260px; 50 -webkit-transform: rotate(55deg); 51 -ms-transform: rotate(55deg); 52 -o-transform: rotate(55deg); 53 transform: rotate(55deg); 54 } 55 .sun-shine-light5{ 56 top: 200px; 57 left: -50px; 58 width: 230px; 59 -webkit-transform: rotate(85deg); 60 -ms-transform: rotate(85deg); 61 -o-transform: rotate(85deg); 62 transform: rotate(85deg); 63 } View Code

 

依照@魔芋铃的建议, 以下是效果的链接(再次感谢):

效果

 

这里用到一个比较陌生的css属性: transform:rotate(Ndeg)  

作用是旋转,其中N为整数,表示旋转的角度。旋转基于对象的重心。

 

心得:

当对象尺寸(长宽)改变时,旋转的重心也会跟着改变,被这个特性折腾了不少时间。

在上面的光线旋转了一定角度后,宽度看起来会变长一点。于是又修改它的width,然后相应的left、top都需要修改了(因为重心位置变了)。

 

今天就到这。以后继续。 谢谢观看。

几年前开始就一直想用css画幅画。 今天才真正开始, 从简单的开始。 作为一个工作压力那么大的程序员...

本文由9159.com发布于前端,转载请注明出处:其实还有一个TODO List,所以下面的css3的属性可能

关键词: 9159.com