diff --git a/custom/public/rotation3D/rotation3D.css b/custom/public/rotation3D/rotation3D.css index b161708a1..4fd12283c 100755 --- a/custom/public/rotation3D/rotation3D.css +++ b/custom/public/rotation3D/rotation3D.css @@ -31,50 +31,20 @@ .rotation3D__item .cont{ position: relative; z-index: 2; } .rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 96px; display: block; height: 35px;} .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: "合肥类脑智能开放平台"; +.lineList .rotation3D__line:nth-child(5n+0) .dot{ } -.itemList .rotation3D__item:nth-child(5) .cont p::after{ - content: "武汉人工智能计算中心"; +.lineList .rotation3D__line:nth-child(5n+1) .dot{ + animation-delay: 1s; } -.itemList .rotation3D__item:nth-child(6) .cont p::after{ - content: "西安未来人工智能计算中心"; +.lineList .rotation3D__line:nth-child(5n+2) .dot{ + animation-delay: 3s; } -.itemList .rotation3D__item:nth-child(7) .cont p::after{ - content: "更多接入中…"; +.lineList .rotation3D__line:nth-child(5n+3) .dot{ + animation-delay: 2s; } -.itemList .rotation3D__item:nth-child(8) .cont p::after{ - content: "中原人工智能计算中心"; +.lineList .rotation3D__line:nth-child(5n+3) .dot{ + animation-delay: 4s; } -.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; } @@ -91,14 +61,17 @@ ---------------------------*/ .rotation3D__line{ position: absolute; left: 50%; top: 50%; - display: block; width: 1px; height: 50%; + display: block; + width: 30px; + 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; } + overflow: hidden; + } +.rotation3D__line .pos{ position: absolute; top: 0; left: 15px;} .rotation3D__line svg { position: absolute; top: 0; } .rotation3D__line svg path { stroke: #fff; fill: none; @@ -140,9 +113,10 @@ position: absolute; font-size: 12px; color: #888; + transform:scale(0.80); + transform-origin:left; white-space: nowrap; - transform: rotate(180deg)scale(0.80); -} + } /*颜色*/ .rotation3D__line.blue { color: #07b2f9; }