更新第26个小实例

2021-10-27 17:13:01 +08:00 · 2021-10-27 17:13:01 +08:00 · bc0012a3b1
parent 7e014e45ce
commit bc0012a3b1
3 changed files with 105 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -29,4 +29,5 @@
 22. HTML5+CSS3小实例之分享按钮切换效果
 23. HTML5+CSS3小实例之简单好玩的水球加载效果
 24. HTML5+CSS3小实例之酷炫的ANIPLEX文字特效
-25. HTML5+CSS3小实例之后台管理系统的侧边导航栏
+25. HTML5+CSS3小实例之后台管理系统的侧边导航栏
+26. HTML5+CSS3小实例之自定义滤镜实现液体加载动画
--- a/css/26.css
+++ b/css/26.css
@ -0,0 +1,62 @@
+*{
+    /* 初始化 取消页面内外边距 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 弹性布局 水平、垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 100%窗口高度 */
+    height: 100vh;
+    background-color: #222;
+}
+svg{
+    /* 将svg标签隐藏 */
+    width: 0;
+    height: 0;
+}
+.loading{
+    /* 相对定位 */
+    position: relative;
+    width: 200px;
+    height: 200px;
+    /* 使用自定义滤镜gooey */
+    filter: url(#gooey);
+}
+.loading span{
+    /* 绝对定位 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    /* 执行动画：动画名称 时长 加速后减速 无限次播放 */
+    animation: animate 4s ease-in-out infinite;
+    /* 动画延迟，通过var函数调用自定义属性--i，计算出要延迟的时间 */
+    animation-delay: calc(0.2s * var(--i));
+}
+.loading span::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: calc(50% - 20px);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(#d1f5ff,#1683ff);
+    /* 这里加个阴影，效果更好 */
+    box-shadow: 0 0 30px #1683ff;
+}
+
+/* 定义动画 */
+@keyframes animate {
+    0%{
+        transform: rotate(0deg);
+    }
+    50%,100%{
+        transform: rotate(360deg);
+    }
+}
--- a/html/26.html
+++ b/html/26.html
@ -0,0 +1,41 @@
+<!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>自定义滤镜实现液体加载动画</title>
+    <link rel="stylesheet" href="../css/26.css">
+</head>
+
+<body>
+    <div class="loading">
+        <!-- --i是CSS的自定义属性，通过var函数可以调用 -->
+        <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>
+        <span style="--i:7;"></span>
+    </div>
+    <!-- 接下来我们来自定义一个滤镜 -->
+    <svg>
+        <!-- <filter>标签是用来定义SVG滤镜，通过id进行调用使用 -->
+        <filter id="gooey">
+            <!-- <feGaussianBlur>元素是用于创建模糊滤镜 -->
+            <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
+            <!-- <feColorMatrix>是过滤中的一种类型，使用矩阵来影响颜色的每个通道(基于RGBA)，可以将其想象成Photoshop中的通道编辑一样 -->
+            <feColorMatrix values="
+                1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                0 0 0 20 -10
+            "></feColorMatrix>
+        </filter>
+        <!-- 到这里自定义滤镜就写好了，接下来我们对它进行调用 -->
+    </svg>
+</body>
+
+</html>