新增第130个小实例：传送带式的loading加载动画

2022-03-28 16:54:01 +08:00 · 2022-03-28 16:54:01 +08:00 · 5fda20e758
parent b1f03099fa
commit 5fda20e758
3 changed files with 96 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -136,4 +136,5 @@
 126. HTML5+CSS3小实例：纯CSS实现瀑布流布局
 127. HTML5+CSS3小实例：带标题的图像悬停效果
 128. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效
-129. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效（下）
+129. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效（下）
+130. HTML5+CSS3小实例：传送带式的loading加载动画
--- a/code/130/130.css
+++ b/code/130/130.css
@ -0,0 +1,71 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2f3542;
+}
+.loader{
+    width: 100px;
+    position: relative;
+}
+.loader div{
+    width: 30px;
+    height: 30px;
+    background-color: #0abde3;
+    /* 绝对定位 */
+    position: absolute;
+    /* 通过var函数调用自定义属性--i，并计算出各个div的left值 */
+    left: calc(var(--i) * 30px);
+    /* 执行动画：动画名 时长 线性的 无限次播放 */
+    animation: move 2s linear infinite;
+    /* 计算并设置每个动画的延迟时间 */
+    animation-delay: calc(var(--i) * -400ms);
+}
+
+/* 定义动画 */
+@keyframes move {
+    0%{
+        /* 5个方块，每个宽度30，所以这里为5*30=150 */
+        left: 150px;
+        top: 0;
+    }
+    80%{
+        left: 0;
+        top: 0;
+    }
+    85%{
+        left: 0;
+        top: -30px;
+        width: 30px;
+        height: 30px;
+    }
+    88%{
+        left: 0;
+        top: -30px;
+    }
+    90%{
+        width: 60px;
+        height: 25px;
+    }
+    95%{
+        left: 150px;
+        top: -30px;
+        width: 30px;
+        height: 30px;
+    }
+    98%{
+        left: 150px;
+        top: -30px;
+    }
+    100%{
+        left: 150px;
+        top: 0;
+    }
+}
--- a/code/130/130.html
+++ b/code/130/130.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>传送带式的loading加载动画</title>
+    <link rel="stylesheet" href="130.css">
+</head>
+
+<body>
+    <div class="loader">
+        <!-- --i为自定义属性（变量），CSS中通过var函数对其调用 -->
+        <div style="--i:0;"></div>
+        <div style="--i:1;"></div>
+        <div style="--i:2;"></div>
+        <div style="--i:3;"></div>
+        <div style="--i:4;"></div>
+    </div>
+</body>
+
+</html>