新增第101个小实例：浮雕效果的彩色loading动画

2022-01-22 17:40:39 +08:00 · 2022-01-22 17:40:39 +08:00 · fd62418d9c
parent a16e5f8d2d
commit fd62418d9c
3 changed files with 96 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -104,4 +104,5 @@
 97. HTML5+CSS3小实例：纯CSS实现开箱子动画
 98. HTML5+CSS3小实例：创意条纹背景的图像悬停效果
 99. HTML5+CSS3小实例：炫彩的发光字特效
-100. HTML5+CSS3+JS小实例：黑色的简约下拉菜单
+100. HTML5+CSS3+JS小实例：黑色的简约下拉菜单
+101. HTML5+CSS3小实例：浮雕效果的彩色loading动画
--- a/css/101.css
+++ b/css/101.css
@ -0,0 +1,69 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #eaeef0;
+}
+.loader{
+    display: flex;
+}
+.loader span{
+    /* 相对定位 */
+    position: relative;
+    width: 50px;
+    height: 50px;
+    background-color: #eaeef0;
+    margin: 0 10px;
+    border-radius: 50%;
+    /* 阴影 inset表示内阴影 */
+    box-shadow: -8px -8px 15px rgba(255,255,255,1),
+    8px 8px 15px rgba(0,0,0,0.2),
+    inset 3px 3px 5px rgba(0,0,0,0.1),
+    inset -1px -1px 5px rgba(255,255,255,1);
+    border: 6px solid #eaeef0;
+}
+.loader span::before{
+    content: "";
+    /* 绝对定位 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: lightseagreen;
+    border-radius: 50%;
+    box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1),
+    inset -1px -1px 5px rgba(255,255,255,1);
+    opacity: 0;
+    /* 执行动画：动画名 时长 线性的 无限次播放 */
+    animation: animate 3.5s linear infinite,
+    animateColor 5s linear infinite;
+    /* 设置动画延迟时间（通过var函数调用自定义属性--i，计算每个元素动画的延迟时间，使得每个元素的动画错开） */
+    animation-delay: calc(var(--i) * 0.15s);
+}
+
+/* 定义动画 */
+/* 中间圆出现 */
+@keyframes animate {
+    0%,9.99%,70.01%{
+        opacity: 0;
+    }
+    10%,70%{
+        opacity: 1;
+    }
+}
+/* 中间圆变色 */
+@keyframes animateColor {
+    to{
+        filter: hue-rotate(360deg);
+    }
+}
--- a/html/101.html
+++ b/html/101.html
@ -0,0 +1,25 @@
+<!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="../css/101.css">
+</head>
+
+<body>
+    <div class="loader">
+        <!-- --i为CSS中的自定义属性（变量），可通过var函数对其调用 -->
+        <span style="--i:0;"></span>
+        <span style="--i:1;"></span>
+        <span style="--i:2;"></span>
+        <span style="--i:3;"></span>
+        <span style="--i:4;"></span>
+        <span style="--i:5;"></span>
+        <span style="--i:6;"></span>
+    </div>
+</body>
+
+</html>