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-.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,12.2,11.16,25.33,13.89,38.84.37,1.89.76,4.35,1.09,6.27.27,1.28.62,4.93.81,6.3.31,2.34.5,6.04.67,8.44.11,1.93.1,4.39.14,6.34,0,.62.04,1.51,0,2.12-.04.85-.15,4.6-.18,5.35-.13,1.52-.31,3.8-.45,5.33-.12,1.35-.66,4.96-.84,6.37-5.31,32.68-24.8,61.7-53.05,78.98-9.62,5.95-20.23,10.36-31.17,13.19-1.91.51-4.27.96-6.2,1.41-1.03.17-3.15.54-4.18.71-1.55.33-4.73.59-6.3.82-1.96.23-4.36.3-6.33.46-2.12.05-4.22.1-6.35.1l-4.28-.14-4.27-.36c-1.3-.12-2.96-.4-4.25-.55-43.29-6.29-77.11-44.66-77.36-88.46-.1-3.14.09-6.47.39-9.59.06-.75.34-2.4.42-3.18.16-1.22.54-2.98.76-4.21.64-2.75,1.35-5.59,2.29-8.24.41-1.22,1-2.84,1.49-4.01.22-.57.57-1.42.83-1.97,8.55-19.55,26.04-34.91,46.59-40.68,6.78-1.96,13.88-2.87,20.93-2.8.49.03,2.25.07,2.67.09,1.83.13,4.02.36,5.85.64,21.01,3.3,39.03,18.36,45.92,38.48,2.43,7.01,3.5,14.52,3.12,21.93-1.27,24.28-21.94,44.06-46.28,43.99-20.84.32-38.24-17.07-37.77-37.94.16-16.28,14.08-29.79,30.36-29.37,11.67.07,22.02,9.33,23.33,20.91.56,4.23-.15,8.68-2.25,12.41-2.28,4.02-6.01,7.23-10.39,8.72-.66.26-1.37.43-2.04.59l-.52.13c-.17.04-.35.06-.53.08-1.38.23-2.84.34-4.24.24-6.94-.38-12.87-5.64-14.12-12.48-.22-1.38-.34-2.85-.18-4.24.52-4.63,3.86-8.81,8.31-10.23,5.74-2,12,.87,13.47,6.91.73,2.78,0,5.9-2.08,7.92-2.03,1.98-5.23,2.88-7.91,1.79-2.69-1.06-4.42-4.09-3.82-6.94,1.07-4.87,8.28-5.6,9-.23.16,1.45-.77,2.93-2.16,3.39-.68.24-1.45.27-2.12-.02-1.36-.54-2.08-2.39-1.2-3.62.9-1.31,3.07-1.17,3.39.51.17.73-.36,1.54-1.11,1.64-.75.18-1.54-.58-1.3-1.35.11-.37.47-.63.85-.63.39-.01.75.34.73.73h-.18c0-.29-.26-.55-.55-.53-.29,0-.57.21-.65.5-.08.28.02.61.23.81.76.71,1.94-.18,1.7-1.12-.27-1.39-2.12-1.46-2.83-.36-1.09,1.85.97,3.83,2.88,3.02,1.19-.42,1.94-1.68,1.79-2.92-.28-2.79-3.35-3.97-5.65-2.59-2.32,1.31-2.77,4.31-1.47,6.52,1.66,2.93,5.41,3.46,8.18,1.83,4.18-2.42,4.36-7.88,1.48-11.39-1.57-1.94-4.03-3.11-6.51-3.13-5.49-.1-10.31,4.21-10.83,9.68-.47,5.8,2.89,11.25,8.24,13.51,3.32,1.39,7.16,1.26,10.56.13.24-.09,1.06-.4,1.32-.5.52-.28,1.2-.55,1.68-.86l.8-.5c.24-.12.56-.37.77-.54,11.18-8.21,7.74-25.18-3.43-31.67-4.31-2.6-9.51-3.44-14.46-2.67-10.02,1.33-18.8,8.92-21.57,18.62-2.12,7.26-.94,15.24,2.31,21.98,3.33,6.75,9.01,12.32,15.86,15.44,13.87,6.37,31.04,2.03,41.89-8.2,7.82-7.25,12.55-17.62,12.97-28.25.22-6.76-.92-13.59-3.28-19.92-6.54-17.42-22.41-30.26-40.86-32.85-3.04-.4-6.28-.61-9.35-.45-5.98.17-11.96,1.25-17.66,3.04-17.99,5.74-33.07,19.71-40.07,37.25-1.52,3.75-2.66,7.69-3.47,11.65-.42,2.38-.83,5-.98,7.42-1.02,15.06,2.46,30.46,9.73,43.66,13.93,25.64,41.7,42.14,70.88,41.83,2.47-.05,5.1-.12,7.57-.35,3.6-.26,7.71-.82,11.25-1.53,31.23-5.94,58.19-26.96,71.83-55.64.26-.47.55-1.22.78-1.71.7-1.6,1.59-3.54,2.17-5.19.37-1,1-2.5,1.3-3.52.71-2.06,1.64-5.08,2.17-7.17.65-2.41,1.18-4.85,1.62-7.31l.63-3.69.44-3.72.11-.93.06-.46.03-.47.12-1.87c.04-1.01.23-2.72.2-3.74l.06-3.74v-.47s0-.47,0-.47l-.03-.95c-.04-.93-.09-2.86-.13-3.79.01-1.43-.33-4.25-.42-5.67-.08-1.03-.24-2.74-.41-3.77-1.85-15-6.46-29.71-13.53-43.05-2.3-4.47-4.99-8.75-7.79-12.92-.6-.79-2.71-3.76-3.32-4.58-1.36-1.72-3.31-4.21-4.75-5.85-.87-.95-2.25-2.56-3.12-3.53-1.05-1.08-3.21-3.32-4.26-4.4-1.27-1.2-3.24-3.01-4.47-4.18l-2.87-2.44c-1.68-1.52-4.12-3.28-5.89-4.68-1.42-1.11-3.15-2.2-4.61-3.25-1.49-1.09-3.3-2.1-4.75-3.04-1.19-.81-2.06-1.23-3.24-1.91l-3.27-1.84-3.36-1.69c-2.49-1.32-5.11-2.35-7.67-3.52-1.98-.75-4.14-1.62-6.13-2.34-.97-.29-4.35-1.44-5.34-1.75-2.1-.58-5.12-1.46-7.24-1.93-1.63-.33-3.84-.89-5.49-1.19-1.03-.17-4.49-.76-5.54-.94-1.83-.25-4.68-.54-6.51-.77-2.1-.11-4.43-.32-6.54-.42-86.62-3.19-160.98,66.83-162.41,153.55-2.17,107.94,84.91,198.72,192.96,200.27,36.59.48,73.26-7.25,106.47-22.59,33.1-15.28,62.77-38.01,86.1-66.03,24.09-28.79,41.48-63.23,50.17-99.75,1.12-4.71,2.22-9.89,3.04-14.67,2.59-14.74,3.78-29.76,3.67-44.72,5.77,0,11.55,0,17.32,0,6.11,0,12.23,0,18.34,0,0,0-.01,0-.02,0Z" style="fill: none;"></path>
</clipPath>
<clipPath id="spiral-2-mask">
<path d="M1492.48,184.5c-.81,118.65-95.84,216.84-214.61,220.41-102.63,4.5-189-79.78-185.46-182.68,2.27-75.62,65.25-137.32,140.98-137.33,58.58-.71,108.58,43.7,114.44,102.04.16,1.05.3,3.93.39,5.05l.11,1.68.03,1.69c0,1.23.1,3.89.03,5.07-.02.86-.09,2.56-.12,3.42-.11,1.71-.28,3.41-.43,5.11-2.8,25.07-16.13,48.12-36.42,63.1-13.61,10.07-30.08,16.25-46.97,17.46-3.23.26-6.9.33-10.14.19-1.01.01-2.4-.15-3.41-.22l-1.7-.15-1.7-.23c-32-3.95-58.69-30.74-62.42-62.75-1.17-8.99-.66-18.25,2.08-26.92,5.09-16.36,17.52-29.91,33.35-36.44,8.35-3.4,17.51-4.94,26.51-4.16,14.81,1.22,28.56,10.04,36,22.82,6.81,11.64,8.74,26.68,3,39.12-7.34,16.7-28.14,26.56-45.37,19.52-12.28-4.98-20.12-18.28-18.1-31.44,1.47-9.62,9.3-17.78,18.86-19.57,4.42-.89,9.21-.5,13.26,1.58,13.3,6.49,14.89,26.81-.4,31.76-3.25.93-6.9.87-9.93-.75-3.03-1.54-5.36-4.41-6.22-7.7-.58-2.18-.6-4.57.24-6.68,1.58-4.31,6.44-7.09,10.93-6.07,3.37.76,5.96,3.89,6.03,7.34.23,3.52-2.81,6.66-6.33,6.56-2.31,0-4.43-1.77-4.86-4.03-.61-2.65,1.53-5.27,4.29-4.99,1.43.15,2.67,1.34,2.83,2.77.33,1.77-1.44,3.45-3.19,2.91-1.85-.56-1.98-3.46.17-3.62,1.29-.1,2,1.8.69,2.33-.55.24-1.25-.18-1.23-.8h.13c0,.52.57.85,1.04.64,1.1-.46.44-2.06-.63-1.95-1.06.03-1.65,1.26-1.16,2.16.43.94,1.61,1.24,2.51.8,1.46-.62,1.64-2.62.66-3.74-1.73-2.13-5.24-.64-5.55,1.9-.22,1.46.44,3.01,1.58,3.92,2.41,1.95,6.2.65,7.5-1.98,1.87-3.65-.84-8.36-4.74-9.1-1.93-.4-3.99.04-5.69,1.01-2.79,1.59-4.48,4.85-4.16,8.04,0,.42.13,1.05.19,1.47.88,4.14,4.31,7.49,8.49,8.2,5.91,1,12.07-2.68,14.18-8.24,1.44-3.67,1.04-7.91-.5-11.49-9.85-20.33-42.1-6.85-34.75,18.09,3.37,11.69,14.81,19.54,26.93,18.49,11.88-.7,22.93-8.5,27.55-19.45,6.31-14.66.78-32.67-10.92-42.99-9.03-8.1-20.84-11.4-32.77-9.87-15.32,1.78-29.28,10.75-37.27,23.94-6.54,10.56-8.57,23.22-6.64,35.41,3.26,23.56,20.9,44.26,43.65,51.13,5.13,1.6,10.48,2.51,15.84,2.78,1.13.05,2.53.05,3.66.06.41-.02,3.22-.12,3.72-.13,1.95-.14,3.98-.3,5.92-.58,38.44-5,68.03-37.87,68.59-76.67.81-52.55-40.09-97-92.63-100.07-62.1-3.46-118.38,42.15-127.85,103.58-.33,1.66-.58,4.12-.78,5.81-.1.87-.26,2.05-.31,2.91-.7,8.81-.57,17.78.37,26.56,4.89,51.27,37.41,98.59,83.33,121.74,20.93,10.76,44.25,16.49,67.74,16.79,23.74.22,47.55-3.92,69.78-12.24,61.12-22.45,108.75-77.63,121.41-141.57.99-4.71,1.79-9.67,2.39-14.45,1.11-8.72,1.59-17.52,1.52-26.32h32.42Z" style="fill: none;"></path>
</clipPath>
<clipPath id="spiral-1-mask">
<path d="M1441.47,190.1c-.86,9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0