新增第157个小实例：小球爬楼梯loading加载动画

2022-05-28 15:53:47 +08:00 · 2022-05-28 15:53:47 +08:00 · 815d04c60f
parent 2748147f7e
commit 815d04c60f
3 changed files with 122 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -163,4 +163,5 @@
 153. HTML5+CSS3+JS小实例：悬停滚动文字的导航栏
 154. HTML5+CSS3+JS小实例：可自由拖拽排序的表格
 155. HTML5+CSS3+JS小实例：背景动态变化的登录界面2.0
-156. HTML5+CSS3小实例：纯CSS实现带进度条的人物卡片切换效果
+156. HTML5+CSS3小实例：纯CSS实现带进度条的人物卡片切换效果
+157. HTML5+CSS3小实例：小球爬楼梯loading加载动画
--- a/code/157/157.css
+++ b/code/157/157.css
@ -0,0 +1,99 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#537895,#09203f);
+}
+.loader{
+    /* 相对定位 */
+    position: relative;
+    color: #fff;
+    width: 96px;
+    height: 68px;
+}
+.loader div{
+    /* currentColor可以获取到父元素的color */
+    background-color: currentColor;
+}
+/* loader下的第一个div（小球） */
+.loader div:nth-child(1){
+    width: 32px;
+    height: 32px;
+    /* 绝对定位 */
+    position: absolute;
+    bottom: 32%;
+    left: 18%;
+    border-radius: 50%;
+    /* 设置变换基点的位置 */
+    transform-origin: center bottom;
+    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
+    animation: ball-jump 0.6s ease-in-out infinite;
+}
+/* loader下的非第一个div（其他三个div，楼梯） */
+.loader div:not(:nth-child(1)){
+    width: 32px;
+    height: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateX(60%);
+    animation: ball-steps 1.8s linear infinite;
+}
+/* 接下来需要分别为每一节楼梯设置不同的动画延迟 */
+.loader div:nth-child(2){
+    animation-delay: 0s;
+}
+.loader div:nth-child(3){
+    animation-delay: -0.6s;
+}
+.loader div:nth-child(4){
+    animation-delay: -1.2s;
+}
+
+/* 定义动画 */
+/* 小球弹跳动画 */
+@keyframes ball-jump {
+    0%{
+        transform: scale(1,0.7);
+    }
+    20%{
+        transform: scale(0.7,1.2);
+    }
+    40%{
+        transform: scale(1,1);
+    }
+    50%{
+        bottom: 150%;
+        transform: scale(1,1);
+    }
+    80%,90%{
+        transform: scale(0.7,1.2);
+    }
+    100%{
+        transform: scale(1,0.7);
+    }
+}
+/* 楼梯移动动画 */
+@keyframes ball-steps {
+    0%{
+        top: 0;
+        right: 0;
+        opacity: 0;
+    }
+    50%{
+        opacity: 1;
+    }
+    100%{
+        top: 100%;
+        right: 100%;
+        opacity: 0;
+    }
+}
--- a/code/157/157.html
+++ b/code/157/157.html
@ -0,0 +1,21 @@
+<!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="157.css">
+</head>
+
+<body>
+    <div class="loader">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+
+</html>