diff --git a/src/assets/images/home/bg.png b/src/assets/images/home/bg.png
new file mode 100644
index 0000000..7f14f0c
Binary files /dev/null and b/src/assets/images/home/bg.png differ
diff --git a/src/assets/images/home/bg2.png b/src/assets/images/home/bg2.png
new file mode 100644
index 0000000..3fe0038
Binary files /dev/null and b/src/assets/images/home/bg2.png differ
diff --git a/src/assets/images/home/btm.png b/src/assets/images/home/btm.png
new file mode 100644
index 0000000..9ba9276
Binary files /dev/null and b/src/assets/images/home/btm.png differ
diff --git a/src/assets/images/home/da.png b/src/assets/images/home/da.png
new file mode 100644
index 0000000..44cc877
Binary files /dev/null and b/src/assets/images/home/da.png differ
diff --git a/src/assets/images/home/fw.png b/src/assets/images/home/fw.png
new file mode 100644
index 0000000..e551614
Binary files /dev/null and b/src/assets/images/home/fw.png differ
diff --git a/src/assets/images/home/fx.png b/src/assets/images/home/fx.png
new file mode 100644
index 0000000..bee934b
Binary files /dev/null and b/src/assets/images/home/fx.png differ
diff --git a/src/assets/images/home/jc.png b/src/assets/images/home/jc.png
new file mode 100644
index 0000000..b6e1945
Binary files /dev/null and b/src/assets/images/home/jc.png differ
diff --git a/src/assets/images/home/light.png b/src/assets/images/home/light.png
new file mode 100644
index 0000000..39c96aa
Binary files /dev/null and b/src/assets/images/home/light.png differ
diff --git a/src/assets/images/home/xt.png b/src/assets/images/home/xt.png
new file mode 100644
index 0000000..bf601e1
Binary files /dev/null and b/src/assets/images/home/xt.png differ
diff --git a/src/assets/images/home/zt.png b/src/assets/images/home/zt.png
new file mode 100644
index 0000000..fc77577
Binary files /dev/null and b/src/assets/images/home/zt.png differ
diff --git a/src/views/home/workspace.vue b/src/views/home/workspace.vue
index b263f07..798346c 100644
--- a/src/views/home/workspace.vue
+++ b/src/views/home/workspace.vue
@@ -2,7 +2,7 @@
@@ -102,7 +130,7 @@ export default {
color: #ffffff;
}
.funMenu {
- height: calc(100% - 60px);
+ /* height: calc(100% - 60px);
display: flex;
flex-direction: column;
justify-content: center;
@@ -139,6 +167,94 @@ export default {
cursor: pointer;
}
}
+ } */
+ /* 旋转动画 */
+ .animate {
+ width: 420px;
+ height: 300px;
+ border-radius: 50%;
+ position: absolute;
+ left: 10px;
+ top: 20px;
+
+ .ball {
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ }
+ .ball img:hover {
+ transform: scale(1.2);
+ }
+ .ball img {
+ width: 70px;
+ height: 70px;
+ margin-bottom: 10px;
+ }
+ /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
+每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半(9s/2) */
+ .ball1 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
+ }
+ .ball2 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
+ }
+ .ball3 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
+ }
+ .ball4 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
+ }
+ .ball5 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
+ }
+ .ball6 {
+ animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
+ animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
+ scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
+ }
+ }
+ }
+
+ @keyframes animX {
+ 0% {
+ left: -20px;
+ }
+ 100% {
+ left: 340px;
+ }
+ }
+ @keyframes animY {
+ 0% {
+ top: -30px;
+ }
+ 100% {
+ top: 200px;
+ }
+ }
+ @keyframes scale {
+ 0% {
+ transform: scale(0.7);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(0.7);
}
}
}