css3地球转动模型（动态数据）

参考资源：https://www.jq22.com/jquery-info24302

<template><div class="wh100 container"><div style="position: relative;"><div class="circle"><div><div v-for="(item, index) in applyList" :key="index" class="ball" @mouseenter="onMouseGo()"@mouseleave="onMouseMove()" @click="dmClick(item)" :class="!(item || {}).permission ? 'no-permission' : ''"><div class="css-opt">{{ !item.permission?'暂无权限':'' }}</div><div class="marquee-border" :class="!(item || {}).permission ? 'no-permission' : ''"><span>{{ item.name }}</span></div><img :src="require(`@/assets/platform/${item.img}`)" /></div></div></div></div></div>
</template>
<script>
export default {data() {return {list: [{id: "81e5f51d6ab845fca406bdc8b0c50e34",homeUrl: "/workbenches",name: '交易管理后台',img: '08-dazong.png',permission: false},{id: "510f731066a3485783a036cc114efe84",name: "数据采集系统",homeUrl: "",img: '05-data-acquisition.png',permission: false},{id: "85954da02faf49c4b13186ab9eb50201",homeUrl: "https://wuliu.xnctc.cn:9111/gps-web/h5/outside",name: '交通运输监管系统',img: '10-transportation-supervision.png',permission: false},{id: "9e05d254ebaf40009b303b3fb7c8b535",homeUrl: "/taxControl",name: '税费服务平台',img: '02-cocal-tax.png',permission: false},{id: "043e929fc50a40b59f2e8bd7340cec79",homeUrl: "/exchange/dataIndex",name: '金融服务中台',img: '04-financial-service.png',permission: false},{id: "82f6b49726234af4a596ac7cfc566435",homeUrl: "/platform/dashboard",name: '平台运营中心',img: '07-operation-management.png',permission: false},{id: "672ab144ba7b4d27bb5d7f443f690387",homeUrl: "/dashboard",name: '电煤保供交易平台',img: '01-coal-supply.png',permission: false},{id: "28b7aa4114814000a9717e0245847b74",homeUrl: "/datav/index",name: '可视化指挥调度平台',img: '06-visual-command.png',permission: false},{id: "425cb0faee4d408cb2b19f5f7bc33fb7",homeUrl: "/sso/tissue/BusinessOrg",name: '账号中心',img: '03-web-financial-service.png',permission: false},{id: "",homeUrl: "/home",name: '煤炭大宗交易平台',img: '09-web-dazong.png',permission: true},],applyList: [],}},
}
}
</script><style scoped>
@keyframes animX {0% {left: -50px;}100% {left: 1100px;}
}@keyframes animY {0% {top: -120px;}100% {top: 450px;}
}.ball {height: 150px;border-radius: 50%;position: absolute;color: #555;font-size: 22px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-size: 100% 100%;-webkit-background-size: 100% 100%;/*动画执行一次所需时间*/animation-duration: 10s, 10s, 20s;/*动画以何种运行轨迹完成一个周期*/animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);/*动画播放次数,无线循环播放*/animation-iteration-count: infinite;/*是否轮流反向播放动画 alternate:正向播放*/animation-direction: alternate;animation-name: animX, animY, scale;cursor: pointer;
}
.ball:nth-child(4) .marquee-border {left: 100px;top: 30px;
}.ball:nth-child(8) .marquee-border {left: 120px;top: 20px;
}
.marquee-border span {position: relative;z-index: 2;display: inline-block;line-height: 22px;
}.marquee-border {height: 30px;/* width: 140px; */position: relative;margin-bottom: 5px;color: #1471FC;font-size: 16px;text-align: center;z-index: 2;padding: 6px 12px;background: url(@/assets/platform/title-bg.png) center no-repeat;background-size: 100% 100%;
}.ball:not(.no-permission):hover .marquee-border::after {display: inline-block;content: '';position: absolute;left: 0;top: 0;height: 30px;width: 100%;background-image: linear-gradient(90deg, #ffffff 0%, #90f9c4 50%, #004de4 100%), linear-gradient(0deg, #004de4 0%, #90f9c4 50%, #fff 100%), linear-gradient(-90deg, #fff 0%, #90f9c4 50%, #004de4 100%), linear-gradient(0deg, #fff 0%, #90f9c4 50%, #004de4 100%);background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;background-size: 100px 2px, 2px 100px, 100px 2px, 2px 100px;background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;animation: moveLine 5s infinite linear;height: calc(100% - 1px);padding: 1px;background-clip: content-box;
}@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;}30% {background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}50% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px;}80% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);}100% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;}
}.ball:not(.no-permission):hover .marquee-border {transform: scale(1.2);transform-origin: center center;
}.no-permission {cursor: default;color: #3D4052 !important;
}.no-permission .marquee-border,
.no-permission img {filter: grayscale(100%);
}.css-opt {font-size: 16px;opacity: 0;color: #E91F24;
}.no-permission:hover .css-opt {opacity: 1;
}.ball img {width: 160px;
}/*鼠标进入停止 active*/
.ball {animation-play-state: paused;
}.circle {/* position: absolute;top: 114px;left: 250px; *//* border-radius: 50%; */width: 1200px;height: 600px;z-index: 3;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;background: gray;background: url(@/assets/platform/center-bg.png) center no-repeat;background-size: 100% 100%;
}.container {position: relative;/* transform: rotateX(20deg); */width: 100%;height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: center;background: url(@/assets/platform/bg.png) center no-repeat;background-size: 100% 100%;
}
</style>