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%;
  }
}
b.........完整代码请登录后点击上方下载按钮下载查看