在 CSS 中的滾動上填充一個圓圈

Question

我正在嘗試用一種顏色填充一個莖，並用圓圈沿着莖的台階。

這是我目前目標的一個例子： https://codepen.io/nicklassandell/pen/ztGac

這是我目前所擁有的： https://codepen.io/TheOshika/full/xxRRVNb （設計類似於上面的代碼，但我從頭開始編寫代碼）我正在使用滾動腳本來觸發填充圓圈中的 animation。 但是我對此並不滿意，因為觸發器的偏移量對於響應式設計來說太難設置了。 我現在正在考慮刪除 javascript 部分，取而代之的是用滾動填充圓圈的莖，但沒有 animation。

這就是我要找的東西，除了我不知道如何讓莖中的背景顏色填滿圓圈：

 .header { position: relative; height: 800px; background: blueviolet; z-index: 3; } html, body { margin: 0; padding: 0; } body { background: #4c63b6; }.container { margin: 0px auto; position: relative; } /* stem */.filling-stem { position: sticky; z-index: 1; float: left; top: 0; left: 50%; transform: translate(-50%, 0); height: 50vh; width: 5px; background-color: #bed0f7; }.stem-background { position: absolute; z-index: 0; left: 50%; transform: translate(-50%, 0); height: 100%; width: 5px; background-color: #1f2933; }.stem-nav { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, 0); height: 100%; } #my-awesome-nav { display: flex; height: 100%; justify-content: space-around; flex-direction: column; list-style: none; margin-left: 0; padding-left: 0; } #my-awesome-nav li a { border: solid 3px black; border-radius: 50%; display: inline-block; background-color: #1f2933; } #my-awesome-nav li a.color-change { height: 40px; width: 40px; background-color: #1f2933; border-radius: 50%; } /* timeline */.timeline-container { position: relative; }.step-container { margin: 0 25% 0 25%; display: flex; align-items: center; height: 1500px; } /* footer */ footer { display: flex; justify-content: center; align-items: center; height: 1000px; width: 100%; background-color: black; color: white; }

 <div class="container"> <div class="container-inner"> <div class="filling-stem"></div> <div class="header"></div> <div class="timeline-container"> <div class="timeline-container-inner"> <div class="stem-background"></div> <div class="stem-nav"> <ul id="my-awesome-nav"> <li data-index="0"><a href="#step-one"> <div class="color-change one"></div> </a></li> <li data-index="1"><a href="#step-two"> <div class="color-change two"></div> </a></li> <li data-index="2"><a href="#step-three"> <div class="color-change three"></div> </a></li> <li data-index="3"><a href="#step-four"> <div class="color-change four"></div> </a></li> <li data-index="4"><a href="#step-five"> <div class="color-change five"></div> </a></li> </ul> </div> <div class="step-container"> <div class="step-container-inner"> </div> </div> </div> </div> </div> </div> <footer> <p>End of the page</p> </footer>

Answer 1

應該可以僅使用 CSS 獲得所需的“填充”效果。

我們為每個 li 元素添加一個偽之前和偽之后元素。 這些具有徑向漸變背景，在包含 a（錨）元素的圓圈的 position 處有一個透明的“咬合”。 在整個事物的后面，我們放置了一個固定元素，該元素在上半部分具有“填充”顏色，在下半部分具有較暗（未填充）的顏色。 這是通過給它一個線性漸變的背景圖像來完成的。

現在不需要內部 div（在錨元素內部）。

這是一個展示這個想法的片段。 引入了 CSS 變量，以便在需要時更輕松地更改尺寸。 （注意：這里有多余的 CSS 可以用來整理。）

 * { margin: 0; padding: 0; --stemw: 5px; /* the width of the stem */ --circled: 40px; /* the diameter of the circles */ --lih: 300px; /* the height of each list item */ --nolis: 5; /* the number of items in the list */ --halfstemw: calc(var(--stemw) / 2); --circler: calc(var(--circled) / 2); /* the circle radius */ --halflih: calc(var(--lih) / 2); } div.bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%); overflow: hidden; } #my-awesome-nav li { position: relative; } #my-awesome-nav li::before, #my-awesome-nav li::after { position: absolute; transform: translateX(calc(-100% + var(--circler))); width: calc(50vw - var(--halfstemw)); height: var(--lih); top: calc(var(--halflih) * -1); content: ''; z-index: -1; } #my-awesome-nav li::before { left: 0; background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%); } #my-awesome-nav li::after{ left: calc(50vw + var(--halfstemw)); background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%); }.header { position: relative; height: 800px; background: blueviolet; z-index: 3; } html, body { margin: 0; padding: 0; } body { background: #4c63b6; }.container { margin: 0px auto; position: relative; } /* stem */.filling-stem { position: sticky; z-index: 1; float: left; top: 0; left: 50%; transform: translate(-50%, 0); height: 50vh; width: 5px; background-color: #bed0f7; }.stem-background { position: absolute; z-index: 0; left: 50%; transform: translate(-50%, 0); height: 100%; width: 5px; background-color: #1f2933; }.stem-nav { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, 0); height: 100%; } #my-awesome-nav { display: flex; height: 100%; justify-content: space-around; flex-direction: column; list-style: none; margin-left: 0; padding-left: 0; } #my-awesome-nav li a { width: 40px; height: 40px; border: solid 3px black; border-style: none; border-radius: 50%; display: inline-block; background-color: #1f2933; background-color: transparent; } /* #my-awesome-nav li a.color-change { height: 40px; width: 40px; background-color: #1f2933; border-radius: 50%; background-color: transparent; } */ /* timeline */.timeline-container { position: relative; }.step-container { margin: 0 25% 0 25%; display: flex; align-items: center; height: 1500px; } /* footer */ footer { display: flex; justify-content: center; align-items: center; height: 1000px; width: 100%; background-color: black; color: white; }

 <div class="bg"></div> <div class="container"> <div class="container-inner"> <div class="filling-stem"></div> <div class="header"></div> <div class="timeline-container"> <div class="timeline-container-inner"> <div class="stem-background"></div> <div class="stem-nav"> <ul id="my-awesome-nav"> <li data-index="0"><a href="#step-one"> </a></li> <li data-index="1"><a href="#step-two"> </a></li> <li data-index="2"><a href="#step-three"> </a></li> <li data-index="3"><a href="#step-four"> </a></li> <li data-index="4"><a href="#step-five"> </a></li> </ul> </div> <div class="step-container"> <div class="step-container-inner"> </div> </div> </div> </div> </div> </div> <footer> <p>End of the page</p> </footer>

腳注：在視網膜屏幕上，我偶爾會在偽元素之間看到一條微弱的線條 - 我認為這是定位計算出現在 CSS 像素的一部分（在高分辨率屏幕上可能意味着屏幕像素“落后”） . 可能需要使偽元素 1 CSS 像素更高，以便與下一個元素重疊，從而為背景提供連續效果。