@pusdn/gatsby-theme-antv/site/components/BannerSVG.module.less

Ant Visualization solution home page

.wrapper {
  width: 100%;
  text-align: center;
}

.block1Circle1 {
  animation: block1Circle1Position 4s ease-in-out infinite;
}
.block1Circle2 {
  animation: block1Circle2Position 4s ease-in-out infinite;
}
.block1Circle3 {
  animation: block1Circle3Position 4s ease-in-out infinite;
}
.block1Circle4 {
  animation: block1Circle4Position 4s ease-in-out infinite;
}
.block1Circle5 {
  animation: block1Circle1Position 4s ease-in-out infinite;
}

@keyframes block1Circle1Position {
  0% {
    cy: 30;
  }
  35% {
    cy: 45;
  }
  65% {
    cy: 15;
  }
  100% {
    cy: 30;
  }
}
@keyframes block1Circle2Position {
  0% {
    cy: 15;
  }
  35% {
    cy: 35;
  }
  65% {
    cy: 45;
  }
  100% {
    cy: 15;
  }
}
@keyframes block1Circle3Position {
  0% {
    cy: 30;
  }
  35% {
    cy: 15;
  }
  65% {
    cy: 45;
  }
  100% {
    cy: 30;
  }
}
@keyframes block1Circle4Position {
  0% {
    cy: 45;
  }
  35% {
    cy: 25;
  }
  65% {
    cy: 15;
  }
  100% {
    cy: 45;
  }
}

.block2Bar1 {
  animation: block2Bar1Width 3.5s ease-in-out infinite;
}
.block2Bar2 {
  animation: block2Bar2Width 3.5s ease-in-out infinite;
}
.block2Bar3 {
  animation: block2Bar3Width 3.5s ease-in-out infinite;
}
.block2Bar4 {
  animation: block2Bar4Width 3.5s ease-in-out infinite;
}

@keyframes block2Bar1Width {
  0% {
    width: 27px;
  }
  40% {
    width: 27px;
  }
  50% {
    width: 53px;
  }
  90% {
    width: 53px;
  }
  100% {
    width: 27px;
  }
}
@keyframes block2Bar2Width {
  0% {
    width: 44px;
  }
  40% {
    width: 44px;
  }
  50% {
    width: 10px;
  }
  90% {
    width: 10px;
  }
  100% {
    width: 44px;
  }
}
@keyframes block2Bar3Width {
  0% {
    width: 17px;
  }
  40% {
    width: 17px;
  }
  50% {
    width: 50px;
  }
  90% {
    width: 50px;
  }
  100% {
    width: 17px;
  }
}
@keyframes block2Bar4Width {
  0% {
    width: 34px;
  }
  40% {
    width: 34px;
  }
  50% {
    width: 5px;
  }
  90% {
    width: 5px;
  }
  100% {
    width: 34px;
  }
}

.block3ArcBig {
  animation: block3ArcBigLinedash 5s ease-in-out infinite;
}
.block3ArcSmall {
  animation: block3ArcSmallLinedash 5s ease-in-out infinite;
}

@keyframes block3ArcBigLinedash {
  0% {
    stroke-dashoffset: 36px;
  }
  40% {
    stroke-dashoffset: 36px;
  }
  50% {
    stroke-dashoffset: 10px;
  }
  90% {
    stroke-dashoffset: 10px;
  }
  100% {
    stroke-dashoffset: 36px;
  }
}
@keyframes block3ArcSmallLinedash {
  0% {
    stroke-dashoffset: 6px;
  }
  40% {
    stroke-dashoffset: 6px;
  }
  50% {
    stroke-dashoffset: 25px;
  }
  90% {
    stroke-dashoffset: 25px;
  }
  100% {
    stroke-dashoffset: 6px;
  }
}

.block4LineVerti {
  animation: block4LineVertiHeight 1s ease-in-out infinite;
}
.block4LineHori {
  animation: block4LineHoriWidth 1s ease-in-out infinite;
}
.block4LineHori {
  animation: block4LineHoriWidth 1s ease-in-out infinite;
}
.block4Circle {
  animation: block4CircleLinedash 1s ease-in-out infinite;
}

@keyframes block4LineVertiHeight {
  0% {
    height: 20px;
    y: 180px;
  }
  100% {
    height: 192px;
    y: 20px;
  }
}
@keyframes block4LineHoriWidth {
  0% {
    width: 20px;
  }
  100% {
    width: 202px;
  }
}
@keyframes block4CircleLinedash {
  0% {
    stroke-dashoffset: 130px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

.block5Fan {
  animation: block5FanLinedash 5s ease-in-out infinite;
}

@keyframes block5FanLinedash {
  0% {
    stroke-dashoffset: 193.5px;
  }
  35% {
    stroke-dashoffset: 193.5px;
  }
  50% {
    stroke-dashoffset: 0px;
  }
  85% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: 193.5px;
  }
}

.block6CircleA {
  animation: block6CircleAPosition 3s ease-in-out infinite;
}
.block6CircleB {
  animation: block6CircleBPosition 3s ease-in-out infinite;
}
.block6CircleC {
  animation: block6CircleCPosition 3s ease-in-out infinite;
}
.block6CircleD {
  animation: block6CircleDPosition 3s ease-in-out infinite;
}
.block6CircleE {
  animation: block6CircleEPosition 3s ease-in-out infinite;
}
.block6CircleF {
  animation: block6CircleFPosition 3s ease-in-out infinite;
}
.block6CircleG {
  animation: block6CircleGPosition 3s ease-in-out infinite;
}
.block6CircleH {
  animation: block6CircleHPosition 3s ease-in-out infinite;
}
.block6CircleI {
  animation: block6CircleIPosition 3s ease-in-out infinite;
}
.block6CircleJ {
  animation: block6CircleJPosition 3s ease-in-out infinite;
}
.block6CircleK {
  animation: block6CircleKPosition 3s ease-in-out infinite;
}
.block6CircleL {
  animation: block6CircleLPosition 3s ease-in-out infinite;
}
.block6CircleM {
  animation: block6CircleMPosition 3s ease-in-out infinite;
}
.block6CircleN {
  animation: block6CircleNPosition 3s ease-in-out infinite;
}
.block6CircleO {
  animation: block6CircleOPosition 3s ease-in-out infinite;
}
.block6CircleP {
  animation: block6CirclePPosition 3s ease-in-out infinite;
}
.block6NodesContainer {
  animation: block6ContainerRotate 3s ease-in-out infinite;
}
@keyframes block6CircleAPosition {
  0% {
    cx: 45.5px;
    cy: 45.5px;
  }
  40% {
    cx: 45.5px;
    cy: 45.5px;
  }
  48% {
    cx: 36.8px;
    cy: 49.8px;
  }
  92% {
    cx: 36.8px;
    cy: 49.8px;
  }
  100% {
    cx: 45.5px;
    cy: 45.5px;
  }
}
@keyframes block6CircleBPosition {
  0% {
    cx: 65.5px;
    cy: 45.5px;
  }
  40% {
    cx: 65.5px;
    cy: 45.5px;
  }
  48% {
    cx: 66.8px;
    cy: 29.8px;
  }
  92% {
    cx: 66.8px;
    cy: 29.8px;
  }
  100% {
    cx: 65.5px;
    cy: 45.5px;
  }
}
@keyframes block6CircleCPosition {
  0% {
    cx: 85.5px;
    cy: 45.5px;
  }
  40% {
    cx: 85.5px;
    cy: 45.5px;
  }
  48% {
    cx: 84.8px;
    cy: 29.8px;
  }
  92% {
    cx: 84.8px;
    cy: 29.8px;
  }
  100% {
    cx: 85.5px;
    cy: 45.5px;
  }
}
@keyframes block6CircleDPosition {
  0% {
    cx: 105.5px;
    cy: 45.5px;
  }
  40% {
    cx: 105.5px;
    cy: 45.5px;
  }
  48% {
    cx: 101.8px;
    cy: 36.8px;
  }
  92% {
    cx: 101.8px;
    cy: 36.8px;
  }
  100% {
    cx: 105.5px;
    cy: 45.5px;
  }
}
@keyframes block6CircleEPosition {
  0% {
    cx: 45.5px;
    cy: 65.5px;
  }
  40% {
    cx: 45.5px;
    cy: 65.5px;
  }
  48% {
    cx: 29.8px;
    cy: 66.8px;
  }
  92% {
    cx: 29.8px;
    cy: 66.8px;
  }
  100% {
    cx: 45.5px;
    cy: 65.5px;
  }
}
@keyframes block6CircleFPosition {
  0% {
    cx: 65.5px;
    cy: 65.5px;
  }
  40% {
    cx: 65.5px;
    cy: 65.5px;
  }
  48% {
    cx: 49.8px;
    cy: 36.8px;
  }
  92% {
    cx: 49.8px;
    cy: 36.8px;
  }
  100% {
    cx: 65.5px;
    cy: 65.5px;
  }
}
@keyframes block6CircleGPosition {
  0% {
    cx: 85.5px;
    cy: 65.5px;
  }
  40% {
    cx: 85.5px;
    cy: 65.5px;
  }
  48% {
    cx: 114.8px;
    cy: 49.8px;
  }
  92% {
    cx: 114.8px;
    cy: 49.8px;
  }
  100% {
    cx: 85.5px;
    cy: 65.5px;
  }
}
@keyframes block6CircleHPosition {
  0% {
    cx: 105.5px;
    cy: 65.5px;
  }
  40% {
    cx: 105.5px;
    cy: 65.5px;
  }
  48% {
    cx: 121.8px;
    cy: 66.8px;
  }
  92% {
    cx: 121.8px;
    cy: 66.8px;
  }
  100% {
    cx: 105.5px;
    cy: 65.5px;
  }
}
@keyframes block6CircleIPosition {
  0% {
    cx: 45.5px;
    cy: 85.5px;
  }
  40% {
    cx: 45.5px;
    cy: 85.5px;
  }
  48% {
    cx: 29.8px;
    cy: 84.8px;
  }
  92% {
    cx: 29.8px;
    cy: 84.8px;
  }
  100% {
    cx: 45.5px;
    cy: 85.5px;
  }
}
@keyframes block6CircleJPosition {
  0% {
    cx: 65.5px;
    cy: 85.5px;
  }
  40% {
    cx: 65.5px;
    cy: 85.5px;
  }
  48% {
    cx: 36.8px;
    cy: 101.8px;
  }
  92% {
    cx: 36.8px;
    cy: 101.8px;
  }
  100% {
    cx: 65.5px;
    cy: 85.5px;
  }
}
@keyframes block6CircleKPosition {
  0% {
    cx: 85.5px;
    cy: 85.5px;
  }
  40% {
    cx: 85.5px;
    cy: 85.5px;
  }
  48% {
    cx: 101.8px;
    cy: 114.8px;
  }
  92% {
    cx: 101.8px;
    cy: 114.8px;
  }
  100% {
    cx: 85.5px;
    cy: 85.5px;
  }
}
@keyframes block6CircleLPosition {
  0% {
    cx: 105.5px;
    cy: 85.5px;
  }
  40% {
    cx: 105.5px;
    cy: 85.5px;
  }
  48% {
    cx: 121.8px;
    cy: 84.8px;
  }
  92% {
    cx: 121.8px;
    cy: 84.8px;
  }
  100% {
    cx: 105.5px;
    cy: 85.5px;
  }
}
@keyframes block6CircleMPosition {
  0% {
    cx: 45.5px;
    cy: 105.5px;
  }
  40% {
    cx: 45.5px;
    cy: 105.5px;
  }
  48% {
    cx: 49.8px;
    cy: 115.8px;
  }
  92% {
    cx: 49.8px;
    cy: 115.8px;
  }
  100% {
    cx: 45.5px;
    cy: 105.5px;
  }
}
@keyframes block6CircleNPosition {
  0% {
    cx: 65.5px;
    cy: 105.5px;
  }
  40% {
    cx: 65.5px;
    cy: 105.5px;
  }
  48% {
    cx: 66.8px;
    cy: 121.8px;
  }
  92% {
    cx: 66.8px;
    cy: 121.8px;
  }
  100% {
    cx: 65.5px;
    cy: 105.5px;
  }
}
@keyframes block6CircleOPosition {
  0% {
    cx: 85.5px;
    cy: 105.5px;
  }
  40% {
    cx: 85.5px;
    cy: 105.5px;
  }
  48% {
    cx: 84.8px;
    cy: 121.8px;
  }
  92% {
    cx: 84.8px;
    cy: 121.8px;
  }
  100% {
    cx: 85.5px;
    cy: 105.5px;
  }
}
@keyframes block6CirclePPosition {
  0% {
    cx: 105.5px;
    cy: 105.5px;
  }
  40% {
    cx: 105.5px;
    cy: 105.5px;
  }
  48% {
    cx: 114.8px;
    cy: 101.8px;
  }
  92% {
    cx: 114.8px;
    cy: 101.8px;
  }
  100% {
    cx: 105.5px;
    cy: 105.5px;
  }
}
@keyframes block6ContainerRotate {
  0% {
    transform: rotate(0deg);
    transform-origin: 77.5px 77.5px;
  }
  40% {
    transform: rotate(0deg);
    transform-origin: 77.5px 77.5px;
  }
  48% {
    transform: rotate(180deg);
    transform-origin: 77.5px 77.5px;
  }
  92% {
    transform: rotate(180deg);
    transform-origin: 77.5px 77.5px;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 77.5px 77.5px;
  }
}

.block8Bar1 {
  animation: block8Bar1Height 3s ease-in-out infinite;
}
.block8Bar2 {
  animation: block8Bar2Height 3s ease-in-out infinite;
}
.block8Bar3 {
  animation: block8Bar3Height 3s ease-in-out infinite;
}

@keyframes block8Bar1Height {
  0% {
    height: 23.75px;
    y: 10px;
  }
  50% {
    height: 30.75px;
    y: 3px;
  }
  100% {
    height: 23.75px;
    y: 10px;
  }
}
@keyframes block8Bar2Height {
  0% {
    height: 33.75px;
    y: 0px;
  }
  50% {
    height: 10px;
    y: 23.75px;
  }
  100% {
    height: 33.75px;
    y: 0px;
  }
}
@keyframes block8Bar3Height {
  0% {
    height: 16.875px;
    y: 17px;
  }
  50% {
    height: 26.875px;
    y: 7px;
  }
  100% {
    height: 16.875px;
    y: 17px;
  }
}

.block7Curve {
  animation: block7CurveLinedash 1.5s ease-in-out infinite;
}
@keyframes block7CurveLinedash {
  0% {
    stroke-dashoffset: 90;
  }
  100% {
    stroke-dashoffset: 0;
  }
}