新增第213个小实例：旋转彩色loading加载动画

2023-03-19 15:12:44 +08:00 · 2023-03-19 15:12:44 +08:00 · 56533c8361
parent 24a30235ae
commit 56533c8361
3 changed files with 65 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -220,6 +220,7 @@
 210. HTML5+CSS3小实例：文字溶合切换效果
 211. HTML5+CSS3+JS小实例：实时给中文添加拼音
 212. HTML5+CSS3小实例：纯CSS实现弧边选项卡
+213. HTML5+CSS3小实例：旋转彩色loading加载动画

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/213/213.css
+++ b/code/213/213.css
@ -0,0 +1,51 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    min-height: 100vh;
+    /* 弹性布局 居中演示 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000;
+}
+.loader{
+    /* css变量 环的宽度 */
+    --s:15px;
+    width: calc(16 * var(--s));
+    height: calc(16 * var(--s));
+    border-radius: 50%;
+    /* 网格布局 */
+    display: grid;
+    /* 渐变蒙版 */
+    -webkit-mask: radial-gradient(50% 50%,
+    #0000 calc(99% - 2 * var(--s)),
+    #000 calc(100% - 2 * var(--s)));
+    /* 执行动画：动画名 时长 线性 循环播放 */
+    animation: spin 3s linear infinite;
+}
+.loader::before{
+    content: "";
+    /* 圆锥渐变 */
+    background: conic-gradient(
+        from 25deg,
+        #70a1d7 25%,
+        #a1de93 0 50%,
+        #f7f48b 0 75%,
+        #f47c7c 0
+    );
+    /* 渐变蒙版 */
+    -webkit-mask: repeating-conic-gradient(#0000 0 25deg,#000 23% 25%),
+    radial-gradient(var(--s) at var(--s) 50%,#000 97%,#0000) left/calc(100% - 2 * var(--s)) 100% repeat-x,
+    radial-gradient(var(--s) at 50% var(--s),#000 97%,#0000) top/100% calc(100% - 2 * var(--s)) repeat-y;
+}
+
+/* 定义动画 */
+@keyframes spin {
+    to{
+        /* 旋转一周 */
+        transform: rotate(1turn);
+    }
+}
--- a/code/213/213.html
+++ b/code/213/213.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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>旋转彩色loading加载动画</title>
+    <link rel="stylesheet" href="213.css">
+</head>
+<body>
+    <div class="loader"></div>
+</body>
+</html>