接着之前的[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如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/sun.css" />

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/house.css" />

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human.css" />

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud.css" />

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/tree.css">

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/apple.css">

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human-animate.css" />

     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud-animate.css" />

     <script type="text/javascript" src="js/analysis.js"></script>

 </head>

 <body>

     <div class="sun">

         <div class="sun-body"></div>

         <div class="sun-shine-light sun-shine-light1"></div>

         <div class="sun-shine-light sun-shine-light2"></div>

         <div class="sun-shine-light sun-shine-light3"></div>

         <div class="sun-shine-light sun-shine-light4"></div>

         <div class="sun-shine-light sun-shine-light5"></div>

     </div>

     <div class="house-width house">

         <div class="house-width house-roof house-roof-left"></div>

         <div class="house-width house-roof house-roof-right"></div>

         <div class="house-width house-wall">

             <div class="house-wall-door">

                 <div class="house-wall-door-handle"></div>

             </div>

         </div>

     </div>

     <div class="human human-pos-1">

         <p class="lines human-speak">大家好，我叫小明。</p>

         <p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>

         <p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-normal"></div>

     </div>

     <div class="human human-pos-2">

         <p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>

         <p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>

         <p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-1"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-1 cloud-animate-1">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-2 cloud-animate-2">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

     <div class="tree">

         <div class="tree-top">

             <div class="tree-crowwn tree-crowwn-left"></div>

             <div class="tree-crowwn tree-crowwn-top"></div>

             <div class="tree-crowwn tree-crowwn-right"></div>

             <div class="tree-crowwn tree-crowwn-bottom"></div>

         </div>

         <div class="tree-middle">

             <div class="tree-trunk"></div>

         </div>

         <div class="tree-bottom">

             <div class="tree-root tree-root-left"></div>

             <div class="tree-root tree-root-middle"></div>

             <div class="tree-root tree-root-right"></div>

         </div>

     </div>

     <!-- TODO:     1.苹果左右震动一下再下跌

             2.苹果跌下来后向左滚动几圈 -->

     <div class="apple">

         <div class="apple-body apple-left"></div>

         <div class="apple-body apple-right"></div>

         <div class="apple-stalk"></div>

     </div>

 </body>

 </html>

增加的css如下：

 .cloud-animate-1 {

     -webkit-animation-duration: 20s;

       -webkit-animation-name: cloudMove-1;

       -webkit-animation-iteration-count: infinite;

       -webkit-animation-direction: alternate;

 }

 .cloud-animate-2 {

     -webkit-animation-duration: 20s;

       -webkit-animation-name: cloudMove-2;

       -webkit-animation-iteration-count: infinite;

       -webkit-animation-direction: alternate;

 }

 @-webkit-keyframes cloudMove-1 {

     25% {

         top : 10px;

     }

     50% {

         top: 50px;

     }

     75% {

         top: 20px;

     }

     to {

         left: 10%

     }

 }

 @-webkit-keyframes cloudMove-2 {

     25% {

         top : 30px;

     }

     50% {

         top: 80px;

     }

     75% {

         top: 10px;

     }

     to {

         left: 85%

     }

 }

could-animate

 .tree{

     bottom: 10px;

     height: 700px;

     position: absolute;

     right: 120px;

     width: 500px;

 }

 .tree-crowwn {

     background-color: green;

     border-radius: 50%;

     position: absolute;

     z-index:;

 }

 .tree-crowwn-left {

     height: 250px;

     top: 150px;

     width: 250px;

 }

 .tree-crowwn-top {

     height: 320px;

     left: 100px;

     width: 320px;

 }

 .tree-crowwn-right {

     height: 250px;

     left: 250px;

     top: 150px;

     width: 250px;

 }

 .tree-crowwn-bottom {

     height: 120px;

     left: 150px;

     top: 270px;

     width: 200px;

 }

 .tree-trunk {

     background-color: #5d2323;

     height: 280px;

     left: 170px;

     position: absolute;

     top: 350px;

     width: 180px;

     z-index:;

 }

 .tree-bottom {

     position: absolute;

     top: 630px;

 }

 .tree-root {

     background-color: #503333;

     height: 30px;

     position: absolute;

     width: 20px;

 }

 .tree-root-left {

     left: 170px;

     -webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);

     -webkit-transform-origin: right top;

 }

 .tree-root-middle {

     left: 250px;

     -webkit-transform: matrix(1, 0, -0.1, 1, 0, 0);

 }

 .tree-root-right {

     left: 330px;

     -webkit-transform: matrix(1, 0, 0.5, 1, 0, 0);

     -webkit-transform-origin: left top;

 }

tree

 .apple {

     bottom: 360px;

     height: 60px;

     position: absolute;

     right: 480px;

     width: 60px;

     z-index:;

     -webkit-animation-duration: 1.5s;

     -webkit-animation-delay: 18s;

       -webkit-animation-name: appleDrop;

       -webkit-animation-timing-function: cubic-bezier(0.5, 0.1, 0.85, 0.3);

       -webkit-animation-fill-mode: forwards;

 }

 .apple-body {

     background-color: #ff3300;

     border-radius: 75% 75% 90% 90%;

     height: 50px;

     position: absolute;

     width: 37px;

     z-index:;

 }

 .apple-left {

 }

 .apple-right {

     right:2px;

 }

 .apple-stalk {

     border: none;

     border-radius: 100%;

     border-right: 3px solid #000;

     height:20px;

     left: 8px;

     position: absolute;

     top:-10px;

     width:20px;

     z-index:;

 }

 @-webkit-keyframes appleDrop{

     from{

     }

     20%{

     }

     80%{

     }

     to{

         bottom: 35px;

     }

 }

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个点，通过这两个点，描述一个变化曲线。还没深入研究过，这里暂不多谈。前面的链接是百度百科的，有兴趣可以看看。今天搜到一个不错的网站，可以用来感受一下贝塞尔曲线在动画上的实际效果：http://cubic-bezier.com/#.17,.67,.83,.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画幅画(六)

[css]我要用css画幅画(六)的更多相关文章

  1. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  2. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  3. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  4. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  5. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  6. [css]我要用css画幅画(四)

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

  7. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  8. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. JavaScript sync and async（同步和异步）

    推荐四篇文章: JavaScript 是单线程的深入分析 JavaScript 运行机制详解:再谈 Event Loop JavaScript 异步编程的4种方法 JavaScript 既是单线程又是 ...

  2. swift 中单例的写法

    在swift中单例的写法和oc的有所不同,在书写的时候又分很多种写法,,如果一个.swift 文件只创建了一个类,可以用那种dispatch_once的写法,如果一个.swift文件中有很多类的存在, ...

  3. Elasticsearch 教程--数据

    在Elasticsearch中,每一个文档都有一个版本号码.每当文档产生变化时(包括删除),_version就会增大.在<版本控制>中,我们将会详细讲解如何使用_version的数字来确认 ...

  4. Get和Post区别

    1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...

  5. TypeError: invalid 'in' operand obj

    尝试在程序去访问远程的Web API,它在运行时,出现异常: TypeError: invalid 'in' operand obj 由于从服务器返回的数据是json.当我们需要得到这些数据时,还得需 ...

  6. JavaScript进阶之this

    javascript的this,一个不知道究竟属于谁的东西 this是一个大利器,用好了就可以帮我们省掉很多事,然而事实上却总是让我们出错.自己就吃过很大的亏.现在咱们就来扒一扒this究竟是什么. ...

  7. 疯狂Android讲义 - 学习笔记（七）

    第8章 Android数据存储与IO  Java IO的数据存储可以移植到Android应用开发上来,Android系统还提供了一些专门的IO API. Android系统内置了SQLite数据库,S ...

  8. 【工业串口和网络软件通讯平台(SuperIO)教程】四.开发设备驱动

    SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1    开发准备 把“开发包”内的所有文件复制到项目的“bin”目录下,或项目下的专用生成目录.开发包 ...

  9. 解决eclipse配置Tomcat时找不到server选项(Mac通用)

    集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...

  10. Java基础学习 -- 接口

    interface是一种特殊的class 接口是纯抽象类 所有的成员函数都是抽象函数: 所有的成员变量都是public static final; 接口是为了方便类的调用 一个类如果要去实现某个接口, ...