接着之前的[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. 2015-10-22 前思后想，决定重构表结构，免得这个APP死在数据表设计上

    新的设计稿出来了,如下,原来旧的是第二张       -------  原来的评论级数只有2级,现在是不限,2级的意思是,用户评论该帖是一级,用户的评论能被人评论,这是第2级,评论评论的评论不能够再被 ...

  2. DotNet的JSON序列化与反序列化

    JSON(JavaScript Object Notation)JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.在现在的通信中,较多的采用JSON数据格式,JSON有 ...

  3. 【十大经典数据挖掘算法】kNN

    [十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 引言 顶级数据挖掘会议ICDM ...

  4. Linux日志定时清理

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  5. 1.什么是Code First(EF Code First 系列)

    EF4.1中开始支持Code First .这种方式在领域设计模式中非常有用.使用Code First模式,你可以专注于领域设计,根据需要,为你一个领域的对象创建类集合,而不是首先来设计数据库,然后来 ...

  6. jQuery动画

    一.显示和隐藏 hide().show() 1.show():显示被选的元素 2.hide():隐藏被选的元素 3.toggle():对被选元素进行隐藏和显示的切换 语法: $(selector).h ...

  7. SQL SERVER 9003错误解决方法 只适用于SQL2000

    SQLSERVER 9003错误解决方法 只适用于SQL2000 (只适用于SQL2000) "无法打开新数据库 'POS'.CREATE DATABASE 中止. (Microsoft S ...

  8. 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM（不用 Command）

    [源码下载] 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM(不用 Command) 作者:webabcd 介绍背水一战 Windows 10 之 MVV ...

  9. 自从升级到macOS后，整个人都不好了

    电脑一直莫名的随机卡死,各种软件都出现了一些崩溃和不稳定的情况. Siri就是个笑话,启用后就开始索引本地硬盘,不管你有没有正在工作:直到你启动Siri,会暂停一下,然后就算是你开在哪不动,过两分钟, ...

  10. mariadb 10.2.3支持延时复制

    在mysql 5.6开始就支持延时复制,这在一些需要维护大量非标准化系统或者运维技术水平较低的公司和开发人员众多的项目组这是一个非常有价值的特性,可以说误操作的概率跟一个城市车祸概率的水平差不多了,我 ...