SVg 动画

下载代码

html

css

分享到微信朋友圈

html

css

html {
  cursor: pointer;
}

body {
  background: #0f0f17;
  padding: 0;
  margin: 0;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  font-family: Sans-serif;
  font-weight: 500;
  text-align: center;
  white-space: pre;
  font-size: 10px;
  letter-spacing: 0.062em;
  line-height: 50px;
  color: #ff3355;
  opacity: 0.75;
  pointer-events: none;
}
h1 span {
  font-weight: 700;
  color: #1a004d;
  background-color: #661aff;
  padding: 0 10px 0 13px;
  margin: 0 6px;
}

svg {
  position: absolute;
  top: 12.5%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: auto;
  height: 75%;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

circle {
  fill: none;
  stroke-width: 0;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 0.0%, 5.2334%;
}

.scaleWarp:nth-child(1) {
  r: 0.01;
  -webkit-animation: animWarp 1.2s 0s cubic-bezier(0.4, -0.1, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0s cubic-bezier(0.4, -0.1, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(1).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0s cubic-bezier(0.8, -0.1, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0s cubic-bezier(0.8, -0.1, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(2) {
  r: 20.01;
  -webkit-animation: animWarp 1.2s 0.15278s cubic-bezier(0.4, -0.07778, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.15278s cubic-bezier(0.4, -0.07778, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(2).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.07639s cubic-bezier(0.8, -0.07778, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.07639s cubic-bezier(0.8, -0.07778, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(3) {
  r: 40.01;
  -webkit-animation: animWarp 1.2s 0.30556s cubic-bezier(0.4, -0.05556, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.30556s cubic-bezier(0.4, -0.05556, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(3).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.15278s cubic-bezier(0.8, -0.05556, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.15278s cubic-bezier(0.8, -0.05556, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(4) {
  r: 60.01;
  -webkit-animation: animWarp 1.2s 0.45833s cubic-bezier(0.4, -0.03333, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.45833s cubic-bezier(0.4, -0.03333, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(4).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.22917s cubic-bezier(0.8, -0.03333, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.22917s cubic-bezier(0.8, -0.03333, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(5) {
  r: 80.01;
  -webkit-animation: animWarp 1.2s 0.61111s cubic-bezier(0.4, -0.01111, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.61111s cubic-bezier(0.4, -0.01111, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(5).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.30556s cubic-bezier(0.8, -0.01111, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.30556s cubic-bezier(0.8, -0.01111, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(6) {
  r: 100.01;
  -webkit-animation: animWarp 1.2s 0.76389s cubic-bezier(0.4, 0.01111, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.76389s cubic-bezier(0.4, 0.01111, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(6).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.38194s cubic-bezier(0.8, 0.01111, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.38194s cubic-bezier(0.8, 0.01111, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(7) {
  r: 120.01;
  -webkit-animation: animWarp 1.2s 0.91667s cubic-bezier(0.4, 0.03333, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 0.91667s cubic-bezier(0.4, 0.03333, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(7).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.45833s cubic-bezier(0.8, 0.03333, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.45833s cubic-bezier(0.8, 0.03333, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(8) {
  r: 140.01;
  -webkit-animation: animWarp 1.2s 1.06944s cubic-bezier(0.4, 0.05556, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.06944s cubic-bezier(0.4, 0.05556, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(8).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.53472s cubic-bezier(0.8, 0.05556, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.53472s cubic-bezier(0.8, 0.05556, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(9) {
  r: 160.01;
  -webkit-animation: animWarp 1.2s 1.22222s cubic-bezier(0.4, 0.07778, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.22222s cubic-bezier(0.4, 0.07778, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(9).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.61111s cubic-bezier(0.8, 0.07778, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.61111s cubic-bezier(0.8, 0.07778, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(10) {
  r: 180.01;
  -webkit-animation: animWarp 1.2s 1.375s cubic-bezier(0.4, 0.1, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.375s cubic-bezier(0.4, 0.1, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(10).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.6875s cubic-bezier(0.8, 0.1, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.6875s cubic-bezier(0.8, 0.1, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(11) {
  r: 200.01;
  -webkit-animation: animWarp 1.2s 1.52778s cubic-bezier(0.4, 0.12222, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.52778s cubic-bezier(0.4, 0.12222, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(11).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.76389s cubic-bezier(0.8, 0.12222, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.76389s cubic-bezier(0.8, 0.12222, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(12) {
  r: 220.01;
  -webkit-animation: animWarp 1.2s 1.68056s cubic-bezier(0.4, 0.14444, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.68056s cubic-bezier(0.4, 0.14444, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(12).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.84028s cubic-bezier(0.8, 0.14444, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.84028s cubic-bezier(0.8, 0.14444, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(13) {
  r: 240.01;
  -webkit-animation: animWarp 1.2s 1.83333s cubic-bezier(0.4, 0.16667, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.83333s cubic-bezier(0.4, 0.16667, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(13).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.91667s cubic-bezier(0.8, 0.16667, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.91667s cubic-bezier(0.8, 0.16667, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(14) {
  r: 260.01;
  -webkit-animation: animWarp 1.2s 1.98611s cubic-bezier(0.4, 0.18889, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 1.98611s cubic-bezier(0.4, 0.18889, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(14).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 0.99306s cubic-bezier(0.8, 0.18889, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 0.99306s cubic-bezier(0.8, 0.18889, 0.8, 1) infinite alternate;
}
.scaleWarp:nth-child(15) {
  r: 280.01;
  -webkit-animation: animWarp 1.2s 2.13889s cubic-bezier(0.4, 0.21111, 0.333, 1) infinite alternate;
          animation: animWarp 1.2s 2.13889s cubic-bezier(0.4, 0.21111, 0.333, 1) infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.scaleWarp:nth-child(15).reverseAnim {
  -webkit-animation: animWarpReverse 0.72s 1.06944s cubic-bezier(0.8, 0.21111, 0.8, 1) infinite alternate;
          animation: animWarpReverse 0.72s 1.06944s cubic-bezier(0.8, 0.21111, 0.8, 1) infinite alternate;
}

@-webkit-keyframes animWarp {
  0% {
    stroke-width: 2px;
    -webkit-transform: scale(1.35) rotate(0deg);
            transform: scale(1.35) rotate(0deg);
    opacity: 1;
  }
  100% {
    stroke-width: 16px;
    -webkit-transform: scale(1.06667) rotate(0deg);
            transform: scale(1.06667) rotate(0deg);
    opacity: 0.06;
    stroke: #2f085f;
  }
}

@keyframes animWarp {
  0% {
    stroke-width: 2px;
    -webkit-transform: scale(1.35) rotate(0deg);
            transform: scale(1.35) rotate(0deg);
    opacity: 1;
  }
  100% {
    stroke-width: 16px;
    -webkit-transform: scale(1.06667) rotate(0deg);
            transform: scale(1.06667) rotate(0deg);
    opacity: 0.06;
    stroke: #2f085f;
  }
}
@-webkit-keyframes animWarpReverse {
  0% {
    stroke-width: 12px;
    -webkit-transform: scale(0.7875);
            transform: scale(0.7875);
    opacity: 1;
  }
  100% {
    stroke-width: 1px;
    -webkit-transform: scale(0.20738);
            transform: scale(0.20738);
    opacity: 0.2;
    stroke: #2f085f;
  }
}
@keyframes animWarpReverse {
  0% {
    stroke-width: 12px;
    -webkit-transform: scale(0.7875);
            transform: scale(0.7875);
    opacity: 1;
  }
  100% {
    stroke-width: 1px;
    -webkit-transform: scale(0.20738);
            transform: scale(0.20738);
    opacity: 0.2;
    stroke: #2f085f;
  }
}
.w2 {
  opacity: 1;
  stroke-width: 500px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg