svg赛道动画

下载代码

html

css

分享到微信朋友圈

html

css

.bottom, .rh-line, .ibm-line {
  fill: none;
 
}

.bottom {
  stroke-width: inherit;
  stroke:#567;
  stroke-opacity: .3;
}

.rh-line, .ibm-line {
  stroke: #e00;
  animation: loop 3s linear infinite;
  stroke-dasharray: 0 28;
  stroke-linecap: round;
}

.finny {
  stroke-width: 1.43;
  animation: rot 36s linear infinite;
  max-height: 50vh;
  margin-top: 25vh;
}

.ibm-line {
  stroke: #1F70C1;
  animation-delay: -1.5s;
}

.rh-line, .ibm-line {
  mix-blend-mode: screen;
}

body{perspective: 400px}

@keyframes rot {
  49%{transform: rotate(179deg) rotatey(60deg)}
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loop {
  0% {
    stroke-dashoffset: .5;
    stroke-dasharray: 1 26.5;
    stroke-width: 1.5;
  }
  20% { stroke-width: .35; }
  50% {
    stroke-dasharray: 7 20.5;
  }
  90% { stroke-width: .35; }
  100% {
    stroke-width: 1.5;
    stroke-dasharray: 1 26.5;
    stroke-dashoffset: 28;
  }
}
.clip-shadow {
  stroke-linecap: butt;
  fill: none; opacity:.9;
  stroke-width: inherit;
  stroke: url(#sgrad);
}

body {
  background-color: #020710;
background-image: radial-gradient( #000, #020710 );
  background-size: 100vw 100vw; 
  background-position: 50% 50%;
}

.rh-dot, .ibm-dot{fill:none; stroke-linecap: round; stroke:#aaa; stroke-width: .3; stroke-dasharray: 0.01 1 .01 1 .01 26;  mix-blend-mode: screen; 
  animation: chase 3s linear infinite;
}    
 
.rh-dot{  stroke: #e00;
}
.ibm-dot{animation-delay: -1.5s;  stroke: #1F70C1;
}

@keyframes chase {
  0% {
    stroke-dashoffset: 31.5;
   
  }
  20% {   }
  50% {

}
  90% {  }
  100% {
    
     stroke-dashoffset: 60;
  }
}

JavaScript

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