update

xiaopohou · Feb 23, 2018 · f36ed31 · f36ed31
1 parent a93097f
commit f36ed31
Show file tree

Hide file tree

Showing 5 changed files with 1,021 additions and 2 deletions.
diff --git a/08-HTML5和CSS3/04-CSS3属性详解.md → 08-HTML5和CSS3/04-CSS3属性详解（一）.md b/08-HTML5和CSS3/04-CSS3属性详解.md → 08-HTML5和CSS3/04-CSS3属性详解（一）.md
diff --git a/08-HTML5和CSS3/05-CSS3属性：动画详解.md → 08-HTML5和CSS3/05-CSS3属性详解：动画详解.md b/08-HTML5和CSS3/05-CSS3属性：动画详解.md → 08-HTML5和CSS3/05-CSS3属性详解：动画详解.md
@@ -1308,7 +1308,7 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 
 鱼在原地摆动并不是一张 gif动图，她其实是由很多张静态图间隔地播放，一秒钟播放完毕，就可以了：
 
-20180209_shark.png
+![](http://img.smyhvae.com/20180209_shark.png)
 
 上面这张大图的尺寸是：宽 509 px、高 2160 px。
 
@@ -1357,7 +1357,7 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 
 ![](http://img.smyhvae.com/20180209_1250.gif)
 
-我们不妨把上面的动画的持续时间从`1s`改成 `8秒`，就可以看到动画的慢镜头：
+我们不妨把上面的动画的持续时间从`1s`改成 `8s`，就可以看到动画的慢镜头：
 
 ![](http://img.smyhvae.com/20180209_1330.gif)
 
@@ -1368,11 +1368,80 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 
 实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是：
 
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .shark {
+            width: 509px;
+            height: 270px; /* 盒子的宽高是一帧的宽高 */
+            border: 1px solid #000;
+            margin: 100px auto;
+            background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
+            animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */
+        }
+
+        /* 鱼所在的父盒子 */
+        .sharkBox {
+            width: 509px;
+            height: 270px;
+            animation: sharkBoxRun 20s linear infinite;
+        }
+
+        @keyframes sharkRun {
+            0% {
+            }
+
+            /* 270 * 8 = 2160 */
+            100% {
+                background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
+            }
+        }
+
+        @keyframes sharkBoxRun {
+            0% {
+                transform: translateX(-600px);
+            }
+
+            100% {
+                transform: translateX(3000px);
+            }
+        }
+
+    </style>
+</head>
+<body>
+<div class="sharkBox">
+    <div class="shark"></div>
+</div>
+
+</div>
+</body>
+</html>
+```
+
+
 ![](http://img.smyhvae.com/20180209_1350.gif)
 
 
 大功告成。
 
+工程文件如下：
+
+- [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540)
+
+
+
+## 动画案例：太阳系
+
+暂略。
+
+
+
+
 
 
 ## 我的公众号