svg+css实现页面滚动彩虹生长动画效果代码-html代码-BFW代码库

svg+css实现页面滚动彩虹生长动画效果代码

代码语言：html

代码描述：svg+css实现页面滚动彩虹生长动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --surf--color--background: #fff9e7;
  --surf--color--foreground: #091a24;
  --surf--color--active: #00a3a3;
  --surf--color--input: #214154;
  --surf--color--navy: #102d3e;
  --surf--color--blue: #1e3c4e;
  --surf--color--teal: #25bbbb;
  --surf--color--yellow: #f0dac2;
  --surf--color--orange: #f7c03e;
  --surf--color--red: #d94a4a;
  --surf--font-family--display: noka, sans-serif;
  --surf--font-family--heading: niveau-grotesk, sans-serif;
  --surf--font-family--body: nitti-grotesk, sans-serif;
  --surf--font-family--light: nitti-grotesk-light, sans-serif;
  --modifier: 0.1;
}

body {
  font-family: sans-serif;
  min-height: 500vh;
  background: linear-gradient(#eee, #f0dac2);
}
body svg.spiral__vector {
  position: fixed;
  top: 0;
  height: 70vw;
  right: 0;
}

#spiral-rainbow-orange-path {
  fill: none;
  fill-rule: evenodd;
  stroke: var(--surf--color--orange);
  stroke-miterlimit: 10;
  stroke-width: 63px;
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

#spiral-rainbow-yellow-path,
#spiral-rainbow-teal-path,
#spiral-rainbow-blue-path,
#spiral-rainbow-red-path {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

#spiral-rainbow-blue-path {
  --modifier: 0.15;
}

#spiral-rainbow-teal-path {
  --modifier: 0.13;
}

#spiral-rainbow-yellow-path {
  --modifier: 0.11;
}

#spiral-rainbow-orange-path {
  --modifier: 0.09;
}

#spiral-rainbow-red-path {
  --modifier: 0.07;
}

@keyframes grow-progress {
  from {
    stroke-dashoffset: 0.02;
    stroke-dasharray: 0px, 999999px;
  }
  to {
    stroke-dashoffset: 0.00002;
    stroke-dasharray: calc(var(--modifier) * 13215.4px), calc(var(--modifier) * 28.5938px);
  }
}
h2 {
  font-size: 8vw;
  position: fixed;
  top: 45vh;
  left: 15vw;
}

svg.intro__ribbon {
  margin-top: 350vh;
}
</style>

  
</head>

<body translate="no">
  <svg viewBox="0 0 1410 521.18" class="spiral__vector">
  <defs>
    <clipPath id="spiral-4-mask">
      <path d="M1614.97,171.21c-.49,80.2-29.97,157.93-82.91,218.18-39.25,44.81-90.6,78.89-147.27,97.28-29.82,9.7-61.09,15.18-92.43,16.11-47.81,1.9-96.2-9-138.24-31.86-84.7-45.55-139.17-134.57-140.16-230.82-2.68-116.93,91.36-215.74,208.43-217.95,32.48-.95,65.2,7.39,93.05,24.16,54.98,32.63,88.06,95.25,82.62,159.11-2.19,25.55-11.96,50.39-27.51,70.76-8.3,10.78-18.19,20.45-29.27,28.33-9.97,7.2-21.09,12.96-32.61,17.21-2.21.81-5.01,1.69-7.25,2.42-8.51,2.51-17.38,4.26-26.19,5.13-3.33.26-6.8.53-10.15.55-.75-.01-3.06.07-3.81.06-1.47-.02-3.66-.12-5.13-.16-58.12-2.76-104.81-52.25-103.73-110.48,0-1,.11-2.91.13-3.85.17-1.95.32-4.46.63-6.39l.34-2.54c.28-1.44.63-3.62.98-5.04.25-1.07.65-2.75.91-3.74.28-1.02.8-2.7,1.08-3.7,9.1-28.88,33.03-51.41,62.46-58.61.84-.18,2.91-.66,3.73-.83,2.83-.6,5.93-.95,8.81-1.3,1.52-.09,3.59-.29,5.07-.32,12.82-.56,25.78,2.32,37.04,8.51,23.97,12.99,38.65,39.67,36.2,66.89-2.52,28.59-27.52,51.17-56.21,50.69-17.22,0-33.73-10.79-40.59-26.57-7.21-16.22-4.57-35.06,9.72-46.45,9.28-7.4,22.65-10.16,33.73-5.4,11.18,4.76,18.4,16.66,17.2,28.78-.93,10.34-9.58,19.26-19.89,20.43-2.96.39-6.03.18-8.87-.78-4.47-1.5-8.29-4.77-10.47-8.95-2.76-5.27-2.93-12.12.66-17.05,5.07-7.28,16.59-8.78,21.86-.92,1.41,2.14,2.12,4.75,1.93,7.3-.27,4.12-3.52,7.75-7.57,8.52-3.7.8-7.53-1.05-8.92-4.64-.63-1.59-.72-3.43-.08-5.04,1.21-3.26,5.67-5.03,8.55-2.84,2.13,1.5,2.75,4.98.7,6.79-2.08,1.98-5.71.99-5.79-2.07-.1-1.82,2.14-3.3,3.7-2.2,1.16.77,1.19,2.73-.23,3.22-.85.37-1.94-.32-1.88-1.27,0-.71.81-1.27,1.46-.95.72.32.62,1.49-.23,1.5v-..........完整代码请登录后点击上方下载按钮下载查看