|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
<div class="homePage">
|
|
|
|
|
<div class="header flex-center">首页</div>
|
|
|
|
|
<div class="funMenu">
|
|
|
|
|
<div class="line" v-for="(line, index) in menuList" :key="index">
|
|
|
|
|
<!-- <div class="line" v-for="(line, index) in menuList" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
class="item"
|
|
|
|
|
v-for="item in line"
|
|
|
|
@ -18,6 +18,34 @@
|
|
|
|
|
<div class="optWrap">点击进入</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
-->
|
|
|
|
|
<!-- 旋转动画 -->
|
|
|
|
|
<div class="animate">
|
|
|
|
|
<div class="ball ball1">
|
|
|
|
|
<img src="@/assets/images/home/jc.png" />
|
|
|
|
|
<p>1</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ball ball2">
|
|
|
|
|
<img src="@/assets/images/home/fw.png" />
|
|
|
|
|
<p>2</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ball ball3">
|
|
|
|
|
<img src="@/assets/images/home/da.png" />
|
|
|
|
|
<p>3</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ball ball4">
|
|
|
|
|
<img src="@/assets/images/home/fx.png" />
|
|
|
|
|
<p>4</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ball ball5">
|
|
|
|
|
<img src="@/assets/images/home/xt.png" />
|
|
|
|
|
<p>5</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ball ball6">
|
|
|
|
|
<img src="@/assets/images/home/zt.png" />
|
|
|
|
|
<p>6</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
@ -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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|