css实现滚动页面驱动svg路径动画效果代码-html代码-BFW代码库

css实现滚动页面驱动svg路径动画效果代码

代码语言：html

代码描述：css实现滚动页面驱动svg路径动画效果代码，使用css新属性animation-timeline实现。

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

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto:wght@100;400&display=swap");
.path-cont {
  position: fixed;
  width: 20vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  color: #FBF7F490;
  z-index: -10;
}

.svgpath {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.svgpath path {
  stroke: #FBF7F430;
}

.obj {
  position: absolute;
  offset-path: polygon(51% 0%, 61% 7%, 69% 12%, 74% 18%, 72% 25%, 62% 29%, 45% 32%, 29% 32%, 13% 26%, 20% 19%, 37% 15%, 56% 15%, 68% 17%, 80% 24%, 82% 31%, 76% 37%, 67% 43%, 57% 49%, 44% 55%, 35% 60%, 26% 66%, 25% 70%, 30% 75%, 36% 81%, 46% 86%, 55% 91%, 65% 96%, 72% 99%);
  position: absolute;
  animation: followpath linear;
  animation-timeline: scroll();
}

@keyframes followpath {
  from {
    offset-distance: 2%;
  }
  to {
    offset-distance: 60%;
  }
}
body {
  background-color: #1f2020;
  color: #FBF7F4;
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

h1 {
  font-family: "Architects Daughter", cursive;
  font-size: clamp(2rem, 8vw + 1rem, 10rem);
  line-height: 1;
  margin: 0;
  background-image: linear-gradient(#ff6090, #E23636);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

p {
  line-height: 1.5;
}

.big-thing {
  width: min(50ch, 100% - 2rem);
  margin: 0 auto;
}

.obj {
  --bg: white;
  --brd: #ff6090;
  width: 3vmin;
  height: 1.5vmin;
  border-top-right-radius: 30% 20%;
  border-bottom-right-radius: 30% 20%;
  border-top-left-radius: 30% 15%;
  border-bottom-left-radius: 30% 15%;
  border: 1px solid var(--brd);
  border-width: 0.5vmin 2.5vmin 0.5vmin 0.8vmin;
  box-shadow: 0 0 0 0.08em #000;
  background-color: var(--bg);
}

.path-cont:before {
  content: "0%";
  position: absolute;
  left: 40%;
}

.path-cont:after {
  content: "100%";
  position: absolute;
  right: 0;
  bottom: 0;
}

a {
  color: #ff6090;
  text-decoration-color: #ffafaf90;
}
</style>


  
</head>

<body >
  <div class="path-cont">
  <svg class="svgpath" preserveAspectRatio="none" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path fill="none" stroke-dasharray="5,3" stroke="#0070f3" d="M51,0 L61,7 L69,12 L74,18 L72,25 L62,29 L45,32 L29,32 L13,26 L20,19 L37,15 L56,15 L68,17 L80,24 L82 31 L76,37 L67,43 L57,49 L44,55 L35,60 L26,66 L25,70 L30,75 L36,81 L46,86 L55,91 L65,96 L72,99"></path>
  </svg>
  <div class="obj"></div>
</div>
<div class="big-thing"> 
  <h1>Scroll Onwards</h1>
  <p> <strong>Sadly no love in firefox and safari yet for animation timeline, have to wait on such implementations.</strong></p>
  <p> </p><a href="" target="_blank">SVG path </a>based offset-path does no.........完整代码请登录后点击上方下载按钮下载查看