Adding make file and fixing image urls

H-Wakanda · Dec 26, 2018 · c54af4e · c54af4e
1 parent 0f184d8
commit c54af4e
Show file tree

Hide file tree

Showing 22 changed files with 447 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/Makefile b/Makefile
@@ -0,0 +1,39 @@
+BUILD = build
+OUTPUT_FILENAME = book
+METADATA = metadata.yml
+CHAPTERS = chapters/**/*.md
+TOC = --toc --toc-depth=2
+IMAGES_FOLDER = images
+COVER_IMAGE = images/cover.png
+LATEX_CLASS = report
+MATH_FORMULAS = --webtex
+CSS_FILE = style.css
+CSS_ARG = --css=$(CSS_FILE)
+ARGS = $(TOC) $(MATH_FORMULAS) $(CSS_ARG)
+
+all: book
+
+book: epub html pdf
+
+clean:
+	rm -r $(BUILD)
+
+epub: $(BUILD)/epub/$(OUTPUT_FILENAME).epub
+
+html: $(BUILD)/html/$(OUTPUT_FILENAME).html
+
+pdf: $(BUILD)/pdf/$(OUTPUT_FILENAME).pdf
+
+$(BUILD)/epub/$(OUTPUT_FILENAME).epub: $(METADATA) $(CHAPTERS)
+	mkdir -p $(BUILD)/epub
+	pandoc $(ARGS) --epub-metadata=$(METADATA) --epub-cover-image=$(COVER_IMAGE) -o $@ $^
+
+$(BUILD)/html/$(OUTPUT_FILENAME).html: $(CHAPTERS)
+	mkdir -p $(BUILD)/html
+	pandoc $(ARGS) --standalone --to=html5 -o $@ $^
+	cp -R $(IMAGES_FOLDER)/ $(BUILD)/html/$(IMAGES_FOLDER)/
+	cp $(CSS_FILE) $(BUILD)/html/$(CSS_FILE)
+
+$(BUILD)/pdf/$(OUTPUT_FILENAME).pdf: $(METADATA) $(CHAPTERS)
+	mkdir -p $(BUILD)/pdf
+	pandoc $(ARGS) -V documentclass=$(LATEX_CLASS) -o $@ $^
diff --git a/build/epub/book.epub b/build/epub/book.epub
diff --git a/chapters/01/01.md b/chapters/01/01.md
@@ -10,7 +10,7 @@
 
 ## Hello,I'm Donovan
 
-![Donovan Hutchinson](/images/donovan_hutchinson.jpg)
+![Donovan Hutchinson](images/donovan_hutchinson.jpg)
 
 大家好，我叫 Donovan ，我是一个设计师和前端工程师，我写过很多关于 CSS 的文章，也在 Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire 上发表过很多。这是我的个人网站 [Hop.ie](http://hop.ie/)。今年以来，我一直在 [cssanimation.rocks](https://cssanimation.rocks/) 上写教程，主要是关于网页动效的，欢迎大家来阅读学习。
 
@@ -39,11 +39,11 @@
 
 一些不错的入门资源推荐给大家：
 
-+ [Interactive HTML/CSS tutorials](http://www.codeavengers.com/)
-+ [Learn to Code HTML&CSS](https://learn.shayhowe.com/html-css/)
+- [Interactive HTML/CSS tutorials](http://www.codeavengers.com/)
+- [Learn to Code HTML&CSS](https://learn.shayhowe.com/html-css/)
 
 ## Homework
 
 每一章节后面都会有一个**课后作业**的部分，我会给大家出一些小题目，目的是让大家更好的学习以及巩固学到的知识。做不做完全取决于你，不过我建议大家最好都去做一下，你会发现自己对 CSS 动画的理解会更加深刻。
 
-**准备好了么**？让我们开始吧！
+**准备好了么**？让我们开始吧！
diff --git a/chapters/01/02.md b/chapters/01/02.md
@@ -14,21 +14,21 @@
 
 例如 CodePen 里面的保存按钮，它会抖动一下，提醒我们需要保存文件。
 
-![Animation Saved Button](/images/save_button-min.gif)
+![Animation Saved Button](images/save_button-min.gif)
 
 当元素在网页上出现时我们也可以添加动画。
 
-![Animating list items (https://cssanimation.rocks/list-items/)](/images/list_item-min.gif)
+![Animating list items (https://cssanimation.rocks/list-items/)](images/list_item-min.gif)
 
 上面的例子中通过动画，让用户更加明显和生动地感受到新内容添加到列表里了，而不是很生硬的一下子就添加好了，这样子给用户的体验会更好一些。多看几个例子：
 
 游戏 [Portal](http://hop.ie/portal/)：
 
-![Portal animation](/images/portal-min.gif)
+![Portal animation](images/portal-min.gif)
 
  [sprout.js](http://sprout.is/)：
 
-![Animated chart from Sprout](/images/sprout-min.gif)
+![Animated chart from Sprout](images/sprout-min.gif)
 
 ## With great power comes great responsibility
 
@@ -40,7 +40,7 @@
 
 下面的例子就很好的说明了这点：当需要指引用户去查看按钮的的时候，动画就停止了。
 
-![National Parks from Rally Interactive](/images/ribbon-min.gif)
+![National Parks from Rally Interactive](images/ribbon-min.gif)
 
 ## Inspiration
 

diff --git a/chapters/01/03.md b/chapters/01/03.md
@@ -26,7 +26,7 @@ CodePen是一个在线写代码的平台，你可以在上面修改HTML、CSS和
 
 我已经创建了一组基本的 HTML 和 CSS 文件，大家可以下载使用，下载地址：[https://github.com/cssanimation/starter/archive/master.zip](https://github.com/cssanimation/starter/archive/master.zip)。
 
-![Starting files](../../images/files.jpg)
+![Starting files](images/files.jpg)
 
 ### Dreamweaver / Macaw / Muse / Coda / Sublime
 

diff --git a/chapters/01/04.md b/chapters/01/04.md
@@ -10,23 +10,23 @@
 
 使用 CSS 中的 `transition` 属性，我们可以在浏览器里制作动画。`transition` 指从一个状态到另一个状态的动画模拟。
 
-![Transitions: A to B](../../images/ab.png)
+![Transitions: A to B](images/ab.png)
 
 当我们告诉浏览器，我们想在某个元素上使用 transition 时，就是让浏览器在状态的变化过程中对属性进行自动插值。
 
-![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](../../images/ab_animated.png)
+![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](images/ab_animated.png)
 
 举个例子，我们可以在一个元素鼠标悬停的时候，使用过渡来改变元素的样式，让浏览器产生从起始状态到终止状态的平滑的过渡效果。
 
-![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](../../images/button.png)
+![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](images/button.png)
 
 ## Transition properties
 
 我们可以在元素的很多属性上创建过渡效果。我们可以控制过渡的快慢，延迟，还可以用 `timing function` 控制过渡具体的变化速度。来看几个例子。
 
-![Combining transitions (http://in-ni.com/)](../../images/winnie-min.gif)
+![Combining transitions (http://in-ni.com/)](images/winnie-min.gif)
 
-![More transitions (http://codepen.io/suez/pen/XJGOyL)](../../images/transitions-min.gif)
+![More transitions (http://codepen.io/suez/pen/XJGOyL)](images/transitions-min.gif)
 
 ## In summary
 

diff --git a/chapters/01/05.md b/chapters/01/05.md
@@ -10,9 +10,9 @@
 
 过渡都是平滑的状态变化，而动画是一种描述多个步骤的方法。
 
-![Transitions: A to B](/images/ab-min.gif)
+![Transitions: A to B](images/ab-min.gif)
 
-![Animations: A to B to C](/images/abc.png)
+![Animations: A to B to C](images/abc.png)
 
 动画更适用于浏览器中相对复杂的移动场景。上面的例子中有三种场景（A，B，C）。转换只会从A到C，而动画允许我们指定步骤B是什么样子的，并确保动画遵循所有三个步骤。
 
@@ -24,19 +24,19 @@
 
 我们在 Codepen 上看到的“Save”按钮世纪上是一个关于动画的很好例子。
 
-![Save Button on CodePen](/images/save_button-min.gif)
+![Save Button on CodePen](images/save_button-min.gif)
 
 它能很好的让人们注意到这个按钮。
 
 该效果是由一系列的`关键帧`组成，这些关键帧告诉浏览器从左到右摇动按钮。我们将在之后更深入地研究关键帧。
 
 另一个示例是来自 Twitter 的 app 构建平台，用于 [Fabric](https://get.fabric.io/) 的登录页面。CSS 动画在这里被很好地使用，有助于传达 Fabric 的模块化概念，同时还确立了信誉:
 
-![Fabric hero image animation](/images/fabric-min.gif)
+![Fabric hero image animation](images/fabric-min.gif)
 
 最后，是我去年在一个会议预告网站上做的一个例子，这是一个 CSS Mac Plus，用来在网上 [theWeb.is teaser](http://theweb.is/) 展示欢迎信息。
 
-![Mac Plus created using CSS](/images/macplus-min.gif)
+![Mac Plus created using CSS](images/macplus-min.gif)
 
 CSS Mac Plus 可以在 [CodePen](https://codepen.io/donovanh/full/HGqjp/) 上面看到，[这里](https://cssanimation.rocks/macplus/)是关于如何实现的指导。
 
@@ -46,7 +46,7 @@ CSS Mac Plus 可以在 [CodePen](https://codepen.io/donovanh/full/HGqjp/) 上面
 
 动画更加复杂，它允许您创建具有任意关键帧的动画序列。它们会自动触发，并且可以循环。
 
-![Transition vs Animation](/images/transitions-animations-min.gif)
+![Transition vs Animation](images/transitions-animations-min.gif)
 
 我们很快将花一些时间来学习动画属性。同时，也要注意网上动画的有趣用法，如果你找到一个好的，[请告诉我](mailto:[email protected])!
 

diff --git a/chapters/02/01.md b/chapters/02/01.md
@@ -11,22 +11,22 @@
 那 `transition` 怎么用呢？来看下面代码：
 
 ```css
-    transition: background 0.5s linear;
+transition: background 0.5s linear;
 ```
 
-在上面的代码中，我们告诉浏览器，我们希望在0.5秒的时间里，按照 `linear` 的时间函数([timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function))来改变某个元素的 `background` 属性。
+在上面的代码中，我们告诉浏览器，我们希望在 0.5 秒的时间里，按照 `linear` 的时间函数([timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function))来改变某个元素的 `background` 属性。
 
 下面结合具体的例子来看一下：我们希望当鼠标在按钮上悬停时(`hover`)改变按钮的 `background`。
 
 ```css
-    button {
-      background: white;
-      transition: background 0.5s linear;
-    }
-
-    button:hover {
-      background: green;
-    }
+button {
+  background: white;
+  transition: background 0.5s linear;
+}
+
+button:hover {
+  background: green;
+}
 ```
 
 这里有一点要注意，`transition` 属性的位置要放到 `button` 中。这样会告诉浏览器，不光按钮从初始状态**变成**悬停(`hover`)的时候要添加过渡效果，当从悬停状态**变回**初始状态时也要添加过渡效果。
@@ -35,24 +35,24 @@
 
 ## Example: Button transition
 
-![](../../images/button-min.gif)
+![](images/button-min.gif)
 
-[你可以查看CodePen上的代码，并尝试修改代码来体会不同的效果。](http://codepen.io/donovanh/pen/MYQdZd)
+[你可以查看 CodePen 上的代码，并尝试修改代码来体会不同的效果。](http://codepen.io/donovanh/pen/MYQdZd)
 
-请注意CodePen代码里以 `transition-` 开头的属性。这里用了全写的方式。
+请注意 CodePen 代码里以 `transition-` 开头的属性。这里用了全写的方式。
 
 ```css
-    transition-property: all;
-    transition-duration: 0.4s;
-    transition-timing-function: ease-out;
+transition-property: all;
+transition-duration: 0.4s;
+transition-timing-function: ease-out;
 ```
 
 上面的代码的意思希望浏览器在**0.4s**的时间里改变**all**所有的属性，包括 `colours, size, position` 等。
 
 可以将 `transition-timing-function` 设置成下面的贝塞尔曲线函数形式，试试效果会发生什么改变。
 
 ```css
-    transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)
+transition-timing-function: cubic-bezier(0.59, -0.26, 0.33, 1.42);
 ```
 
 ## Prefixes and browser compatibility

diff --git a/chapters/02/02.md b/chapters/02/02.md
@@ -68,11 +68,11 @@
 
 举个栗子说明下：[Baymax example](http://cssanimation.rocks/baymax/) 。
 
-![Source: http://cssanimation.rocks/baymax/](../../images/baymax-min.gif)
+![Source: http://cssanimation.rocks/baymax/](images/baymax-min.gif)
 
 再来一个：[button sheen effect](https://cssanimation.rocks/pseudo-elements/)
 
-![Source: https://cssanimation.rocks/pseudo-elements/](../../images/sheen-min.gif)
+![Source: https://cssanimation.rocks/pseudo-elements/](images/sheen-min.gif)
 
 ## Homework
 

diff --git a/chapters/02/03.md b/chapters/02/03.md
@@ -6,11 +6,11 @@
 
 第一个例子，我们使用 `linear`：
 
-![Linear transition](../../images/linear-min.gif)
+![Linear transition](images/linear-min.gif)
 
 第二个例子，我们使用 `cubic-bezier`：
 
-![Cubic-bezier timing function](../../images/demo-min.gif)
+![Cubic-bezier timing function](images/demo-min.gif)
 
 通过 `cubic-bezier`，我们让边框开始时先往里缩一下，然后再开始改变。结束的时候先变大一点然后再缩回到正确的大小。
 
@@ -20,31 +20,31 @@
 
 ## Linear
 
-![Linear](../../images/linear-example-min.gif)
+![Linear](images/linear-example-min.gif)
 
 `linear` 表示属性值按照一个固定的速度线性的变化，中间不会有突变，所以不会出现加快或减慢的状态。非常适合速度不变的场景下使用，比如车窗外不断飞过的风景或者一直旋转的月亮。
 
 ## Ease-in
 
-![Ease-in](../../images/ease-in-min.gif)
+![Ease-in](images/ease-in-min.gif)
 
 `ease-in` 表示属性值先以较慢速度变化，然后速度越来越快，就好比一个球从高处落下，一开始下降的速度很慢，然后越来越快。
 
 ## Ease-out
 
-![Ease-out](../../images/ease-out-min.gif)
+![Ease-out](images/ease-out-min.gif)
 
 `ease-out` 刚好跟 `ease-in` 相反，一开始速度快，然后速度越来越慢。最适合元素从屏外进入屏内进行显示的情况。
 
 ## Ease-in-out
 
-![Ease-in-out](../../images/ease-in-out-min.gif)
+![Ease-in-out](images/ease-in-out-min.gif)
 
 `ease-in-out` 是上面两个的合成，一开始慢，然后变快，然后又变慢。做加载的效果时用这个时间函数效果会很不错。
 
 ## Cubic-bezier
 
-![Cubic-bezier (custom)](../../images/cubic-bezier-min.gif)
+![Cubic-bezier (custom)](images/cubic-bezier-min.gif)
 
 上面所讲的时间函数本质上都是贝塞尔曲线。利用 `cubic-bezier` 我们可以自定义具体的变化曲线。
 
@@ -56,19 +56,19 @@
 
 两个控制点坐标为 `(1, -0.49)` 和 `(.13, 1.09)`，画个坐标系来看一下：
 
-![Source: http://cubic-bezier.com/#1,-0.49,.13,1.09](../../images/cubic-bezier-graph.png)
+![Source: http://cubic-bezier.com/#1,-0.49,.13,1.09](images/cubic-bezier-graph.png)
 
 有个在线工具[cubic-bezier.com](http://cubic-bezier.com)可以实时看到通过拖动控制点生成不同的曲线。
 
 把控制点坐标设置大于1，看看会有啥效果。:)
 
 ## Steps
 
-![Steps](../../images/steps-min.gif)
+![Steps](images/steps-min.gif)
 
 目前为止讲过的时间函数（速度的变化）都是连续的曲线，`steps` 可以将过渡时间分成大小相等的时间时隔来运行。比如使用 `steps(4)`，效果就会变成如上图那样不连续的效果。
 
-![](../../images/steps.png)
+![](images/steps.png)
 
 这适合做精灵动画(`sprite animation`)。比如一个精灵动画有4帧，设置`steps`，就可以通过改变`background position` 来创建动画了。
 

diff --git a/chapters/02/04.md b/chapters/02/04.md
@@ -12,7 +12,7 @@
 
 前面我们提到的 `button` 的例子比较简单，这里我们来看个复杂的例子。
 
-![Source: http://codepen.io/donovanh/pen/YPMGpJ](../../images/multiple-button-min.gif)
+![Source: http://codepen.io/donovanh/pen/YPMGpJ](images/multiple-button-min.gif)
 
 在这个[例子](http://codepen.io/donovanh/pen/YPMGpJ)里我们创造了一个比较复杂的 `hover` 效果，但我们其实关键的样式只有一句话:
 
@@ -24,11 +24,11 @@
 
 本例中的按钮由两个 icon 和两个 text 组成。初始状态（鼠标未悬停）显示 follow me 和 twitter 的 icon，@ 标志和 cssanimation 不显示。
 
-![](../../images/button-element-positioning.png)
+![](images/button-element-positioning.png)
 
 当鼠标悬停时再显示 @ 标志和 cssanimation 文本。
 
-![](../../images/button-element-positioning2.png)
+![](images/button-element-positioning2.png)
 
 我们使用 CSS 中的 `transform` 来实现上面的显示和隐藏。对 twitter icon 进行绝对定位，设置其 `left` 和 `top`
 
@@ -62,7 +62,7 @@
 
 再看一个例子。在本例中，当鼠标在卡片上悬停时，下方会显示文字。
 
-![Source: http://codepen.io/donovanh/pen/LEvjJg](../../images/cat-min.gif)
+![Source: http://codepen.io/donovanh/pen/LEvjJg](images/cat-min.gif)
 
 分析下这个效果：初始时其实 text 也是显示的，只不过设置了 `opacity` 为0，让它变得透明，所以看不见。鼠标悬停时，把 `opacity` 改为1，同时修改文本外层容器的高度。【Tips：初始时外层的 `info` 容器设置了 `overflow:hidden`， 同时对文本设置了 `transform`， 将其从可视区域移出去，并且设置其 `opacity` 为0，所以文字就被隐藏了】
 

diff --git a/chapters/02/05.md b/chapters/02/05.md
@@ -10,7 +10,7 @@
 
 看下面的例子，具体代码可见[CodePen](http://codepen.io/donovanh/pen/YPbxqa)。
 
-![Source: http://codepen.io/donovanh/pen/YPbxqa](../../images/js-triggered-button-min.gif)
+![Source: http://codepen.io/donovanh/pen/YPbxqa](images/js-triggered-button-min.gif)
 
 ```html
 <button id="show-element">Show it</button>