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 @@
首页
-
+ + +
+
+ +

1

+
+
+ +

2

+
+
+ +

3

+
+
+ +

4

+
+
+ +

5

+
+
+ +

6

+
+
@@ -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); } } }