From d0b2815367f40e8fc0832882910b91841f3ce662 Mon Sep 17 00:00:00 2001
From: shengchanzhe <179998674@qq.com>
Date: Fri, 13 Oct 2023 11:11:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/animation/inputing.vue  | 59 ++++++++++++++++++++++++++
 src/components/animation/loding.vue    | 44 +++++++++++++++++++
 src/components/animation/recording.vue | 51 ++++++++++++++++++++++
 3 files changed, 154 insertions(+)
 create mode 100644 src/components/animation/inputing.vue
 create mode 100644 src/components/animation/loding.vue
 create mode 100644 src/components/animation/recording.vue

diff --git a/src/components/animation/inputing.vue b/src/components/animation/inputing.vue
new file mode 100644
index 0000000..c0dc097
--- /dev/null
+++ b/src/components/animation/inputing.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="dots">
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</template>
+
+<style scoped>
+.dots {
+  width: 3em;
+  height: 3em;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  align-items: center;
+}
+
+.dots > div {
+  width: 0.5em;
+  height: 0.5em;
+  background-color: #3cefff;
+  border-radius: 50%;
+  animation: fade 1.5s alternate ease-in-out infinite;
+}
+
+.dots > div:nth-of-type(2),
+.dots > div:nth-of-type(4) {
+  animation-delay: 0.25s;
+}
+
+.dots > div:nth-of-type(3),
+.dots > div:nth-of-type(5),
+.dots > div:nth-of-type(7) {
+  animation-delay: 0.5s;
+}
+
+.dots > div:nth-of-type(6),
+.dots > div:nth-of-type(8) {
+  animation-delay: 0.75s;
+}
+
+.dots > div:nth-of-type(9) {
+  animation-delay: 1s;
+}
+
+@keyframes fade {
+  to {
+    opacity: 0.2;
+  }
+}
+</style>
diff --git a/src/components/animation/loding.vue b/src/components/animation/loding.vue
new file mode 100644
index 0000000..f0a6dc0
--- /dev/null
+++ b/src/components/animation/loding.vue
@@ -0,0 +1,44 @@
+<template>
+  <div />
+</template>
+
+<style scoped>
+div {
+  position: relative;
+  width: 2em;
+  height: 2em;
+  border: 3px solid #3cefff;
+  overflow: hidden;
+  animation: spin 3s ease infinite;
+}
+
+div::before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 2em;
+  height: 2em;
+  background-color: hsla(185, 100%, 62%, 0.75);
+  transform-origin: center bottom;
+  transform: scaleY(1);
+  animation: fill 3s linear infinite;
+}
+
+@keyframes spin {
+  50%,
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fill {
+  25%,
+  50% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+</style>
diff --git a/src/components/animation/recording.vue b/src/components/animation/recording.vue
new file mode 100644
index 0000000..017926e
--- /dev/null
+++ b/src/components/animation/recording.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <span />
+    <span />
+    <span />
+    <span />
+  </div>
+</template>
+
+<style scoped>
+div {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 2em;
+}
+
+span {
+  width: 0.3em;
+  height: 1em;
+  background-color: #3cefff;
+}
+
+span:nth-of-type(1) {
+  animation: grow 1s -0.45s ease-in-out infinite;
+}
+
+span:nth-of-type(2) {
+  animation: grow 1s -0.3s ease-in-out infinite;
+}
+
+span:nth-of-type(3) {
+  animation: grow 1s -0.15s ease-in-out infinite;
+}
+
+span:nth-of-type(4) {
+  animation: grow 1s ease-in-out infinite;
+}
+
+@keyframes grow {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  50% {
+    transform: scaleY(2);
+  }
+}
+</style>