aiforge/custom/public/rotation3D/rotation3D.css

/*
  椭圆会使内部失真    transform: rotateX(50deg);
*/
.rotation3D{
    position: relative; width: 800px; height: 600px;  user-select: none;
    margin: 0 auto;
    /* border: 1px solid white; border-radius: 100%; */
    /* cursor: move; */
}
.rotation3D .center{
    display: none;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.rotation3D .itemList{ position: absolute; width: 100%; height: 100%; z-index: 20; }
.rotation3D .lineList{
    position: absolute; width: 100%; height: 100%; z-index: 10;
    transform-style: preserve-3d;
}

/*---------------------------点样式---------------------------*/
.rotation3D__item{
    position: absolute; display: block; width: 161px; height: 188px;
    text-align: center; line-height: 30px; font-size: 16px; color: white;
    /*background: #2292ef; border-radius: 4px;*/
    /*cursor: pointer; */
}
.rotation3D__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; }
.rotation3D__item .cont{ position: relative; z-index: 2; }
.rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 96px; display: block; }
.rotation3D__item .cont p{ color: #101010; }
.itemList .rotation3D__item .cont p::after{
    font-size: 12px;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 60px;
    color: #101010;
}
.itemList .rotation3D__item:nth-child(1) .cont p::after{
    content: "鹏城云脑一号";
}
.itemList .rotation3D__item:nth-child(2) .cont p::after{
    content: "鹏城云脑二号";
}
.itemList .rotation3D__item:nth-child(3) .cont p::after{
    content: "北大人工智能集群系统";
}
.itemList .rotation3D__item:nth-child(4) .cont p::after{
    content: "合肥类脑智能开放平台";
}
.itemList .rotation3D__item:nth-child(5) .cont p::after{
    content: "武汉人工智能计算中心";
}
.itemList .rotation3D__item:nth-child(6) .cont p::after{
    content: "西安未来人工智能计算中心";
}
.itemList .rotation3D__item:nth-child(7) .cont p::after{
    content: "更多接入中…";
}
.itemList .rotation3D__item:nth-child(8) .cont p::after{
    content: "中原人工智能计算中心";
}
.itemList .rotation3D__item:nth-child(9) .cont p::after{
    content: "成都人工智能计算中心";
}
.itemList .rotation3D__item:nth-child(10) .cont p::after{
    content: "横琴先进智能计算中心";
}
.itemList .rotation3D__item:nth-child(11) .cont p::after{
    content: "国家超级计算济南中心";
}

.rotation3D__item.blue{ color: #01e9fc; }
.rotation3D__item.green{ color: #b4b3ca; }
.rotation3D__item.yellow{ color: #ffd200; }

/*底座*/
.rotation3D__item .baseImg{ position: absolute; width: 100%; height: 100%; z-index: 1; }
.rotation3D__item.blue .baseImg{ background: url("img/idc-red.png"); }
.rotation3D__item.green .baseImg{ background: url("img/idc-green.png"); }
.rotation3D__item.yellow .baseImg{ background: url("img/idc-yellow.png"); }

/*---------------------------
    线样式
    线高为总高的一般
---------------------------*/
.rotation3D__line{
    position: absolute; left: 50%; top: 50%;
    display: block; width: 1px; height: 50%;
    padding-top: 60px; color: #fff; font-size: 50px;
    /*background: #fff;*/
    /*原点设置在中间*/
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
.rotation3D__line .pos{ position: absolute; top: 0; }
.rotation3D__line svg { position: absolute; top: 0; }
.rotation3D__line svg path {
    stroke: #fff; fill: none;
    stroke-width: 2;
    animation: path-animation 100s linear 0s infinite normal;
}
@keyframes path-animation {
    0% { stroke-dashoffset:500; }
    100% { stroke-dashoffset:0; }
}
.rotation3D__line .dot {
    position: absolute; top: 0; left: 0; text-align: center;
    /*width: 35px; height: 35px; font-size: 35px; */
    width: 19px; height: 19px; font-size: 19px;
}
.rotation3D__line .dot1,.rotation3D__line .dot3,.rotation3D__line .dot4{
    animation: svg-path-animation 6s ease-in-out 0s infinite normal;
}
.rotation3D__line .dot1{
    offset-path: path("M0 400, 0 0"); offset-distance: 0%;
}
.rotation3D__line .dot2{
    offset-path: path("M0 200, 0 0"); offset-distance: 0%;
    background: #ffd200; border-radius: 100%;
    font-size: 22px; color: #000;
}
.rotation3D__line .dot3{
    offset-path: path("M20 400 S 0 200, 20 0"); offset-distance: 0%;
}
.rotation3D__line .dot4{
    position: relative;
    offset-path: path("M20 0 S 40 200, 20 400"); offset-distance: 0%;
}
@keyframes svg-path-animation {
    from {offset-distance: 100%;}
    to {offset-distance: 0%;}
}
.dot1 > span{
    position: absolute;
    font-size: 12px;
    color: #888;
    transform: rotate(180deg)scale(0.80);
}

/*颜色*/
.rotation3D__line.blue { color: #07b2f9; }
.rotation3D__line.green { color: #ac94ee; }
.rotation3D__line.yellow { color: #ffd500; }

.rotation3D__line.blue svg path { stroke: #07b2f9; }
.rotation3D__line.green svg path { stroke: #ac94ee; }
.rotation3D__line.yellow svg path { stroke: #ffd500; }