小编Kun*_*jan的帖子

CSS 动画将页面上的图标滚动到路径

我想创建一个 CSS 动画，其中箭头在滚动时沿着 SVG 蛇形路径移动，并在每个新部分上更改图标。

我看了几个例子：

但我无法通过我的页面设计重新创建预期的行为。

到目前为止，这是我的代码：

window.addEventListener('scroll', function() {
  let l = Path_440.getTotalLength();
  let dasharray = l;
  let dashoffset = l;
  e = document.documentElement;
  theFill.setAttributeNS(null, "stroke-dasharray", l);
  theFill.setAttributeNS(null, "stroke-dashoffset", l);
  dashoffset = l - window.scrollY * l / (e.scrollHeight - e.clientHeight);
  //console.log('window.scrollY', window.scrollY, 'scrollTop', e.scrollTop, 'scrollHeight', e.scrollHeight, 'clientHeight', e.clientHeight, 'dash-offset', dashoffset);
  theFill.setAttributeNS(null, "stroke-dashoffset", dashoffset);
})

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="246" height="2990" viewBox="0 0 246 2990" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                <path id="Path_440" d="M210.001 1.5C210.001 1.5 41.0015 324.5 …

Run Code Online (Sandbox Code Playgroud)

html css jquery svg css-animations

Kun*_*jan

2023 06-09

4
推荐指数

1
解决办法

628
查看次数

水平CSS向导导航

我正在尝试建立一个水平的css向导导航,每个步骤都有一个圆形的CSS圈和文本.我被困在1点需要从右侧乘坐边界.几乎尝试了所有步骤.附加代码.

附上问题的屏幕截图.

错误图片

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
ul:before {
  content: '';
  width: 96%;
  border: 2px solid #21a2d1;
  position: absolute;
  top: 1em;
  margin-top: -6px;
  z-index: -1;
  margin-left: 16px;
}
.active:after {
  content: '';
  width: 100%;
  border: 2px solid #b7b7b7;
  position: absolute;
  top: 1em;
  margin-top: -6px;
  z-index: -1;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;  
}
li {
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.7em;
  border-radius: 50%;
  background: #21a2d1;
  margin: …

Run Code Online (Sandbox Code Playgroud)

html css css3

Kun*_*jan

2016 12-26

1
推荐指数

1
解决办法

1471
查看次数