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

代码语言：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-.2c.17,0,.33-.09.42-.23.19-.29.02-.73-.29-.87-.49-.23-1.13.21-1.11.75-.03.78.82,1.29,1.52.99.73-.24,1.04-1.1.78-1.8-.53-1.59-2.79-1.44-3.49-.02-.91,1.78.82,3.96,2.75,3.67,1.94-.14,3.38-2.09,3.01-3.98-.25-1.88-1.9-3.44-3.79-3.59-3.12-.27-5.93,2.46-5.69,5.6.21,4.3,4.25,7.13,8.39,6.16,4.49-.98,7.3-5.37,6.43-9.86-.85-5.45-6.07-9.31-11.53-8.65-7.04.62-12.5,7.17-11.74,14.22l.04.57.09.56c.06.38.11.76.19,1.13.34,1.46.88,2.94,1.59,4.27,3.07,5.66,9.17,8.98,15.57,8.54,3.62-.22,7.18-1.41,10.18-3.44,15.61-10.7,9.53-34.07-6.75-40.62-3.86-1.6-8.11-2.19-12.26-1.82-13.45.87-25.47,11.13-28.56,24.2-1.28,5.19-1.13,10.64-.07,15.86,3.73,18.38,20.57,32.07,39.33,31.82,25.21.04,47.14-19.69,49.55-44.8,1.74-18.3-5.4-37.07-18.52-49.88-11.66-11.5-27.88-18.07-44.26-17.86-22.16.22-43.03,9.67-57.83,26.16-2.98,3.42-5.82,7.1-8.18,10.97-.72,1.08-1.65,2.8-2.3,3.94-.15.24-.41.75-.53,1.01-4.05,7.72-6.74,16.17-8.03,24.79-.12,1.09-.35,2.89-.47,3.95-.06,1.04-.2,2.94-.27,3.97-.57,17.2,3.43,34.58,11.64,49.68,18.76,34.63,55.72,54.5,94.91,51.09,9.9-.71,19.8-2.67,29.23-5.76,1.08-.38,3.25-1.13,4.33-1.51,1.64-.6,3.69-1.48,5.33-2.12,10.14-4.36,19.85-10.05,28.43-16.99,23.91-18.93,40.2-46.98,44.66-77.15.34-2.12.55-4.64.84-6.77.11-2.05.37-4.75.43-6.81l.08-4.55.02-1.14c-.05-2.59-.13-5.47-.28-8.06-2.17-38.24-19.37-75.27-47.18-101.59-29.2-28.07-69.41-43.5-109.9-42.09-97.07,1.75-179.57,79.95-185.9,176.9-4.43,69.26,22.9,138.3,72.98,186.2,49.22,47.42,115.36,70.85,183.41,65.98,29.04-1.81,57.86-7.83,85.15-17.92,50.21-18.47,95.09-50.79,128.77-92.33,9.51-11.81,18.33-24.43,25.95-37.55,19.2-32.77,31.93-69.29,37.39-106.86,2.12-15.01,3.17-30.2,3.06-45.36h38.9,0Z" style="fill: none;"></path>
    </clipPath>
    <clipPath id="spiral-3-mask">
      <path d="M1554.03,177.83c-.6,95.79-50.79,184.9-132.32,235.15-22.85,14.13-47.85,24.93-73.82,31.84-31.44,8.32-64.42,11.37-96.79,7.97-111.27-11.85-198.08-107.64-198.02-219.65-1.31-98.14,79.39-180.2,177.64-179.77,2.36.01,6.11.13,8.54.23,2.03.16,4.35.34,6.4.52,2.46.2,6.05.78,8.49,1.1,2.41.46,6.03,1.07,8.4,1.65,1.95.48,4.32.99,6.23,1.54,1.56.42,4.67,1.38,6.16,1.82,1.14.37,4.84,1.7,6.06,2.1,2.27.83,4.69,1.9,6.94,2.79,4.23,1.89,8.38,3.92,12.45,6.14,2.19,1.34,5.24,2.97,7.32,4.39l3.57,2.33c1.61,1.09,3.62,2.57,5.21,3.71,1.03.65,3.97,3.14,5.03,3.94.55.45,1.12.88,1.65,1.35l1.6,1.41,3.2,2.82,3.06,2.96c.3.28,1.63,1.59,1.91,1.85l.36.39.73.77c.56.54,3.12,3.36,3.63,3.88.34.38,1.69,1.99,2.07,2.43,2.16,2.46,4.65,5.7,6.62,8.32.69,1.02,2.92,4.14,3.65,5.23,2.53,3.85,4.87,7.82,7.09,11.85,6.45.........完整代码请登录后点击上方下载按钮下载查看