[css]我要用css画幅画(六)
接着之前的[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画幅画(六)的更多相关文章
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(二)
接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- [css]我要用css画幅画(五)
接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- [css]我要用css画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- [css]我要用css画幅画(一)
几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- geotrellis使用（二）geotrellis-chatta-demo以及geotrellis框架数据读取方式初探
在上篇博客(geotrellis使用初探)中简单介绍了geotrellis-chatta-demo的大致工作流程,但是有一个重要的问题就是此demo如何调取数据进行瓦片切割分析处理等并未说明,经过几天 ...
- android 真机调试出现错误 INSTALL_FAILED_INSUFFICIENT_STORAGE 的解决方法。
关于这个神奇的 内存不够错误的通常解决方法,网上大把,建议大家在尝试过了网上的方法后再来尝试下我的这种方法. 编译工具: android studio 测试真机:米 2 调试的时候出现:INSTALL ...
- C/C++ 双精度double 数据相加出错缺陷解释
不知道有没有人和我一样遇到过这样一个问题,请看下面代码. #include<iostream> using namespace std; int main(){ double a=2.3, ...
- ZOJ Problem Set - 1350 The Drunk Jailer ac代码 memset
这是一道很简单的题目,题目大概意思说下:就是有n个监狱(编号从1到n),第一次全部打开,第二次打开编号为2的倍数的,第三次打开编号为3的倍数的,以此类推...最后问你有几个监狱是打开的 题目中我使用了 ...
- Oracle数据块损坏篇之10231内部事件
实验:某个分区数据块损坏,不完全恢复此分区表数据 背景:数据库没有有效备份,某个分区中有数据块损坏. 要求:最大限度恢复此分区数据. 环境:RHEL 6.4 + Oracle 11.2.0.4 1. ...
- spring笔记--事务管理之声明式事务
事务简介: 事务管理是企业级应用开发中必不可少的技术,主要用来确保数据的完整性和一致性, 事务:就是一系列动作,它们被当作一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. Spring中使 ...
- Spring-AOP实践 - 统计访问时间
公司的项目有的页面超级慢,20s以上,不知道用户会不会疯掉,于是老大说这个页面要性能优化.于是,首先就要搞清楚究竟是哪一步耗时太多. 我采用spring aop来统计各个阶段的用时,其中计时器工具为S ...
- 在Visual Studio 2012中使用VMSDK开发领域特定语言（二）
本文为<在Visual Studio 2012中使用VMSDK开发领域特定语言>专题文章的第二部分,在这部分内容中,将以实际应用为例,介绍开发DSL的主要步骤,包括设计.定制.调试.发布以 ...
- RECONFIGURE语句会清空计划缓存么？
几个星期前,有个网友问我一个非常有趣的问题:RECONFIGURE语句会清空计划缓存么?通常我对这个问题的答案是简单的是,但慢慢的我找出了真正的答案是“看情况啦”.我们来看下它,为什么“它看情况”. ...
- 重温Bootstrap
预热 ★ 学习要点 1. 理解其GridSystem(栅格排版): 2. 熟悉其所提供的各种CSS样式及显示效果: 3. 知道提供了哪些直接可用的UI组件,以及如何使用JavaScript去调整其交互 ...