140 lines
3.1 KiB
Plaintext
140 lines
3.1 KiB
Plaintext
<template>
|
|
<div @mousemove="handleMouseMove">
|
|
<ul id="ul1">
|
|
<li v-for="index in numCards" :key="index" ref="cards">
|
|
<p class="pt10px pb10px text-15px">大金数据</p>
|
|
<span class="text-12px leading-15px">大金数据数据数据数据数据</span>
|
|
</li>
|
|
<div id="earth" class="earth"></div>
|
|
</ul>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
const numCards = ref(9);
|
|
const mouseX = ref(0);
|
|
const mouseY = ref(0);
|
|
const isDragging = ref(false);
|
|
|
|
const handleMouseMove = (event) => {
|
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
mouseX.value = event.clientX - rect.left;
|
|
mouseY.value = event.clientY - rect.top;
|
|
};
|
|
|
|
const updateRotation = () => {
|
|
const cardRefs = ref([]);
|
|
const earth = ref(null);
|
|
|
|
onMounted(() => {
|
|
cardRefs.value = document.querySelectorAll('#ul1 li');
|
|
earth.value = document.getElementById('earth');
|
|
setInterval(() => {
|
|
cardRefs.value.forEach((card, index) => {
|
|
const d = (360 / numCards.value) * index + mouseX.value / 10;
|
|
card.style.transform = `rotateY(${d}deg) translateZ(350px)`;
|
|
|
|
if (Math.abs(d) < 30) {
|
|
card.style.zIndex = 2;
|
|
if (earth.value) {
|
|
earth.value.style.transform = 'translateZ(-400px)';
|
|
}
|
|
} else {
|
|
card.style.zIndex = -1;
|
|
if (earth.value) {
|
|
earth.value.style.transform = 'translateZ(400px)';
|
|
}
|
|
}
|
|
});
|
|
}, 30);
|
|
});
|
|
};
|
|
|
|
const autoRotate = () => {
|
|
const interval = setInterval(() => {
|
|
if (!isDragging.value) {
|
|
// 自动旋转的速度
|
|
rotationY.value += 1;
|
|
}
|
|
}, 30);
|
|
|
|
onMounted(() => {
|
|
clearInterval(interval);
|
|
});
|
|
};
|
|
|
|
updateRotation();
|
|
autoRotate();
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: #000;
|
|
}
|
|
|
|
#ul1 {
|
|
position: relative;
|
|
width: 110px;
|
|
height: 75px;
|
|
margin: 190px auto;
|
|
background: none;
|
|
transform-style: preserve-3d;
|
|
transform: perspective(1320px) rotateX(-15deg) rotateY(0deg);
|
|
}
|
|
|
|
#ul1 li {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 1s all ease;
|
|
transform: rotateY(0deg) translateZ(0px);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: rgba(14, 116, 238, 0.8);
|
|
color: rgb(255, 255, 255);
|
|
line-height: 10px;
|
|
text-align: center;
|
|
/* font-size: 30px; */
|
|
p{
|
|
font-size: 15px;
|
|
|
|
}
|
|
}
|
|
|
|
#ul1 li img {
|
|
width: 100%;
|
|
}
|
|
|
|
#earth {
|
|
position: absolute;
|
|
top: 2%;
|
|
left: 50%;
|
|
width: 260px;
|
|
height: 260px;
|
|
margin-top: -222px;
|
|
margin-left: -130px;
|
|
border-radius: 50%;
|
|
background-image: url('./images/diqiu.png');
|
|
background-size: cover;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(400px);
|
|
z-index: 1;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
</style>
|
|
|