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>