02.会飞的鸟

65923b2f · 邱旭 · 8d4c067b · 65923b2f · 65923b2f
Commit 65923b2f authored Mar 10, 2021 by 邱旭
Show whitespace changes
Inline Side-by-side

Showing with 100 additions and 0 deletions

02.会飞的鸟.html 02.会飞的鸟/02.会飞的鸟.html +59 -0

02.会飞的鸟.md 02.会飞的鸟/02.会飞的鸟.md +41 -0

No files found.
--- a/02.会飞的鸟/02.会飞的鸟.html
+++ b/02.会飞的鸟/02.会飞的鸟.html
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+
+    <title>02.会飞的鸟</title>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        #bird {
+            /* 大小 */
+            width: 50px;
+            height: 50px;
+
+            /* 颜色 */
+            background-color: #f00;
+
+            /* 位置 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            /* 旋转、缩放等属性 */
+            transform: scale(1, 1) rotate(45deg);
+
+            /* 锚点 */
+            transform-origin: center;
+
+            /* 动画 */
+            animation: bird-fly 5s infinite;
+        }
+
+        @keyframes bird-fly {
+            0% {
+                top: 50%;
+                transform: scale(1, 1) rotate(45deg)
+            }
+            50% {
+                top: 30%;
+                transform: scale(1, 1) rotate(45deg)
+            }
+            100% {
+                top: 50%;
+                transform: scale(1, 1) rotate(45deg)
+            }
+        }
+    </style>
+</head>
+<body>
+<div id="bird"></div>
+</body>
+</html>
--- a/02.会飞的鸟/02.会飞的鸟.md
+++ b/02.会飞的鸟/02.会飞的鸟.md
+# 会飞的Bird
+
+引入概念：使用`动画`改变显示对象属性
+
+动画是一个游戏重要的组成部分，如果没有动画，游戏将变得枯燥无味
+
+本小节创建一个简单keyframe动画，以此来理解游戏中的动画
+
+在style标签中加入一段动画的代码
+```css
+@keyframes bird-fly {
+    0% {
+        top: 50%;
+        transform: scale(1, 1) rotate(45deg)
+    }
+    50% {
+        top: 30%;
+        transform: scale(1, 1) rotate(45deg)
+    }
+    100% {
+        top: 50%;
+        transform: scale(1, 1) rotate(45deg)
+    }
+}
+```
+
+把刚刚我们写的css动画应用在我们的Bird上  
+```css
+#bird {
+    [...]
+    
+    /* 动画 */
+    animation: bird-fly 5s infinite;
+}
+```
+
+经过一顿操作，我们得到了自己一只活生生的鸟  
+但是这样的方式似乎无法自由的操作  
+想想王者荣耀，你的英雄该如何送塔？
+如下图:  
+![02_1.gif](../images/02_1.gif)