fix

b8451cc0 · 彭世瑜 · e3be4d4a · b8451cc0 · b8451cc0
Showing with 141 addition and 1 deletion

blog/front-end-combat/animation.md blog/front-end-combat/animation.md +58 -1

blog/front-end-combat/demo/animation-walking.html blog/front-end-combat/demo/animation-walking.html +83 -0

未找到文件。
--- a/blog/front-end-combat/animation.md
+++ b/blog/front-end-combat/animation.md
@@ -67,4 +67,61 @@ animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动

 [](demo/animation-2.html ':include height=420')

-https://www.bilibili.com/video/BV1xq4y1q7jZ?p=45&spm_id_from=pageDriver
+
+
+background复合属性
+
+```css
+background: color image repeat attachment position;
+```
+- background-color
+- background-image
+- background-repeat
+- background-attachment
+- background-position
+
+-  background-size: cover/contian
+  - cover: 图片完全覆盖盒子，可能会导致图片显示不全
+  - contian：最大边和盒子尺寸相等，就不进行缩放
+
+
+animation复合属性（了解）
+
+属性 | 作用 | 取值
+- | - | -
+animation-name | 动画名称
+animation-duration | 动画时长
+animation-delay | 延迟时间
+animation-fill-mode | 动画执行完毕时状态 | forwards 最后一帧状态/ backwards第一帧状态
+animation-timing-function | 速度曲线 | steps(数字) 逐帧动画
+animation-iteration-count | 重复次数 | infinite 无限循环
+animation-direction | 动画执行方向 | alternate 反方向
+animation-play-state | 暂停动画 | paused 暂停，通常配合hover使用
+
+
+- 补间动画：两个动画之间平滑动画
+- 逐帧动画：两个动画之间状态不补全
+
+多组动画
+
+```css
+animation: 动画1, 动画2, ...动画N;
+```
+
+走马灯，无缝动画
+
+
+```css
+hmtl, body {
+    height: 100%
+}
+```
+
+示例: 无缝动画
+
+[](demo/animation-walking.html ':include :type=code')
+
+[](demo/animation-walking.html ':include height=120')
+
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=55&spm_id_from=pageDriver
\ No newline at end of file
--- a/blog/front-end-combat/demo/animation-walking.html
+++ b/blog/front-end-combat/demo/animation-walking.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible"
+          content="IE=edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .box {
+            margin: 0 auto;
+            width: 600px;
+            height: 100px;
+            background-color: skyblue;
+            overflow: hidden;
+        }
+
+        .box ul {
+            list-style: none;
+            display: flex;
+            width: 2600px;
+            animation: move 5s infinite linear;
+        }
+
+        /* 鼠标经过，暂停动画 */
+        .box:hover ul {
+            animation-play-state: paused;
+        }
+
+        .box ul li {
+            height: 100px;
+            line-height: 100px;
+            width: 200px;
+            text-align: center;
+            font-size: 30px;
+            color: white;
+            font-weight: 500;
+        }
+
+        /* 动画位移，向左移动10个元素 */
+        @keyframes move {
+            from {
+                transform: translate(0);
+            }
+
+            to {
+                transform: translate(-2000px);
+            }
+        }
+    </style>
+
+    <div class="box">
+        <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            <li>4</li>
+            <li>5</li>
+            <li>6</li>
+            <li>7</li>
+            <li>8</li>
+            <li>9</li>
+            <li>10</li>
+
+            <!-- 复制出来，实现无缝衔接 -->
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+        </ul>
+    </div>
+</body>
+
+</html>
\ No newline at end of file