接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧。 本次的更新包括:
1. 给云增加动画
2. 画了一棵树
3. 树上画了一个苹果,并给苹果增加坠落的动画
其实还有一个TODO List, 不过这个List没有也可以算完成,所以这个List可能会无限期搁置:
1. 苹果坠落前左右摇晃一下
2. 苹果落地后滚动几圈
那么进入正题。
github:https://github.com/bee0060/Css-Paint
demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-6.html
完整html如下:
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 meta charset="UTF-8" 5 title>Css Paint</ 6 link rel="stylesheet" type="text/css" href="../../css/sun-house/sun.css" /> 7 ="../../css/sun-house/house.css" 8 ="../../css/sun-house/human.css" 9 ="../../css/sun-house/cloud.css" 10 ="../../css/sun-house/tree.css"11 ="../../css/sun-house/apple.css"12 13 ="../../css/sun-house/human-animate.css" 14 ="../../css/sun-house/cloud-animate.css" 15 16 script type="text/javascript" src="js/analysis.js"></script17 18 body19 div class="sun"20 ="sun-body"div21 ="sun-shine-light sun-shine-light1"22 ="sun-shine-light sun-shine-light2"23 ="sun-shine-light sun-shine-light3"24 ="sun-shine-light sun-shine-light4"25 ="sun-shine-light sun-shine-light5"26 27 28 ="house-width house"29 ="house-width house-roof house-roof-left"30 ="house-width house-roof house-roof-right"31 ="house-width house-wall"> 32 ="house-wall-door"> 33 ="house-wall-door-handle"34 35 36 37 38 ="human human-pos-1"39 p ="lines human-speak">大家好,我叫小明。p40 ="lines human-speak human-speak-delay-3">我是一个程序员,最喜欢宅在家里LOL。41 ="lines human-speak human-speak-delay-12">静静,我们交个朋友好吗?我的电话是13800123456。42 ="human-head-normal"43 ="human-body-normal"44 ="human-arms-normal"45 ="human-legs-normal"46 47 48 ="human human-pos-2"49 ="lines human-speak human-speak-delay-6">大家好,我叫静静50 ="lines human-speak human-speak-delay-9">和大家看到的一样,我热爱舞蹈。51 ="lines human-speak human-speak-delay-15">不要,程序员什么的最讨厌了!52 53 54 55 ="human-legs-1"56 57 58 ="cloud cloud-pos cloud-pos-1 cloud-animate-1"59 ="cloud-pos cloud-border cloud-bg cloud-top"60 ="cloud-pos cloud-border cloud-bg cloud-left"61 ="cloud-pos cloud-border cloud-bg cloud-right"62 ="cloud-pos cloud-border cloud-bg cloud-bottom"63 64 ="cloud cloud-pos cloud-pos-2 cloud-animate-2"65 66 67 68 69 70 71 ="tree"72 ="tree-top"73 ="tree-crowwn tree-crowwn-left"74 ="tree-crowwn tree-crowwn-top"75 ="tree-crowwn tree-crowwn-right"76 ="tree-crowwn tree-crowwn-bottom"77 78 ="tree-middle"79 ="tree-trunk"80 81 ="tree-bottom"82 ="tree-root tree-root-left"83 ="tree-root tree-root-middle"84 ="tree-root tree-root-right"85 86 87 <!-- TODO: 1.苹果左右震动一下再下跌 88 2.苹果跌下来后向左滚动几圈 --> 89 ="apple"90 ="apple-body apple-left"91 ="apple-body apple-right"92 ="apple-stalk"93 94 95 html>
增加的css如下:
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 10 cloudMove-2; 11 12 13 } 14 15 @-webkit-keyframes cloudMove-1 { 16 25% { 17 top : 10px; 18 } 19 20 50% { 21 top: 50px; 22 } 23 24 75% { 25 20px; 26 } 28 to { 29 left: 10% 30 } 31 } 32 33 @-webkit-keyframes cloudMove-2 { 34 35 30px; 36 } 38 39 80px; 40 } 41 42 43 10px; 44 } 45 46 to { 47 85% 48 } 49 }
.tree{ bottom: height: 700px; position: absolute; right: 120px; 6 width: 500px; 7 } 8 9 .tree-crowwn { background-color: green; border-radius: 50%; 13 z-index: 2; 14 } 16 .tree-crowwn-left { 250px; 18 top: 150px; 19 20 } 21 22 .tree-crowwn-top { 23 320px; 24 left: 100px; 26 } .tree-crowwn-right { 30 31 32 33 } 34 35 .tree-crowwn-bottom { 36 37 38 270px; 200px; 40 } .tree-trunk { #5d2323; 44 280px; 45 170px; 46 350px; 48 180px; 49 1; 50 } 51 52 .tree-bottom { 53 54 630px; 55 } 56 57 .tree-root { 58 #503333; 59 60 61 20px; 62 } 63 64 .tree-root-left { 65 66 -webkit-transform: matrix(1,-0.5,1,0); 67 -webkit-transform-origin: right top; 68 } 69 70 .tree-root-middle { 71 72 73 } 74 75 .tree-root-right { 76 330px; 77 78 left top; 79 }
.apple { 360px; 60px; 480px; 60px; 7 3; 1.5s; -webkit-animation-delay: 18s; appleDrop; -webkit-animation-timing-function: cubic-bezier(0.5,0.1,0.85,0.3); -webkit-animation-fill-mode: forwards; .apple-body { #ff3300; 75% 75% 90% 90%; 20 37px; 22 23 } 24 25 .apple-left { 26 27 } 28 29 .apple-right { 2px; 31 } .apple-stalk { border: none; 100%; border-right: 3px solid #000; 20px; 8px; 40 -10px; 41 42 43 } 44 45 @-webkit-keyframes appleDrop{ from{ 47 20%{ 50 51 } 80%{ 53 54 } 55 to{ 56 bottom: 35px; 57 } 58 }
这里用到的陌生的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个点,通过这两个点,描述一个变化曲线。还没深入研究过,这里暂不多谈。前面的链接是百度百科的,有兴趣可以看看。今天搜到一个不错的网站,可以用来感受一下贝塞尔曲线在动画上的实际效果:http://cubic-bezier.com/#.17,.67 。 平时写动画时也可以借助这个网站,不用辛苦的调半天数字。
想深入了解这个属性,建议找找更深入的文章,这里只是浅尝辄止 :)
4. animation-fill-mode - 用于声明动画执行结束后的目标样式,默认值为none。该值受animation-direction和 animation-iteration-count值的影响。 若animation-iteration-count的值是infinite,动画不会结束,则该属性无效。
可选值包括:
none - 动画结束后,不采用动画关键帧设置的样式。
forwards - 采用动画最后一帧时的样式
backwards - 采用动画第一帧时的样式
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画幅画(六)