原始關閉原因未解決
# # #注意:這目前只在Chrome Canary 115+中啟用了實驗網絡平臺功能。
一般來說,策略是在url() CSS函數中使用offset-path樣式屬性來引用元素應該遵循的路徑。在這種情況下,您應該將其設置為url(#my_path)。然后在你的@ keyframes & lt名稱& gt,簡單地從偏移距離過渡:0%;至偏移距離:100%;。
但是,將滾動驅動時間軸附加到動畫的方法很大程度上取決于頁面的結構以及路徑在頁面上的確切位置。也就是說,有兩種情況。
案例1:路徑跨越了整個滾動容器
這是一個簡單的例子。我們可以使用animation-timeline: scroll()將滾動時間線與動畫關聯起來;,它引用最近的祖先滾動容器的塊軸。然后我們使用animation在元素上設置動畫:& lt名稱& gt線性;。
確保還通過position: absolute和inset: 0將元素的初始位置設置為偏移父元素的(0,0)。總之,代碼應該如下所示:
#car {
width: 25px;
height: 25px;
position: absolute;
inset: 0;
offset-path: url(#my_path);
animation: offsetDistance linear;
animation-timeline: scroll();
}
@keyframes offsetDistance {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
<img id="car" width="256" height="256" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFZaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chle4QcAAAAJcEhZcwAACxMAAAsTAQCanBgAAAL6UExURUdwTLwoJQAEB8w9OuJBPuZWU9BCP7hPTOceHq4tKNktJdpsarwpJeRPSq8ICHEnJrAPC4cxL8lAPdBTULUbG6lCQs1FQbcpJ9hlYsAuK885NsIzMeM3Me07N4NQUr8hHq8yMNFHRMY8Obk4NcI3NMo1MrwpJ7spJrctK7QXEtdjX6MAAMo6OMhCPy4MDrxBP6osK8dAPOlAO9x5d8Q8OaYAALVXVrdLScZqaZBmZpAAAIwzM8xPTKw7Oa80NJ8nJ7wqJ78qKMY2NJcdG95LR0pLUMMrKbkzL8s5N6coJsQ6NkJDQzlMTGQAAOFPTGgAAB9QV510dOdSTjxaYs1YVdJkYv+apddqFdhlY9dhX9pqaBUUFdZjYdNWVNZaV9BEQdRYVdBGQ9VUUdNPS9pvbNx4dhsZGtJRTtxxb9ZfXdloZdI3M89QTcdOTNx0ctZdWjAtLttaWME7ON6AftlnZNpsaiUdHsxAPNlbWM8/PNQ9OgA3Os9KRtdXVNdQTSQkJdVbWCEWFzk5PM06N9NUUdNIRUlbYqBRUbJAPt57eSopK4o/PgAPEsYsKeJwbtA7OLg1M9pXVIosKy5ISwALDQAaHVBPUdJNStpRTshTUaI8Oqg3NrMzMahDQalSUtxfXAMGCHc5OsQzMAAsMNxLR9dEQeN3dbUjIdxjYAAUFk1FRU45OwAeIQEoK9NLR75VVLgtK20yM3ssLJIyMpk2Nd5pZq1CQa4SEJVKSRweH8o0MoI7Ot9lYTYzNa0wLbtDQH1LSqEuLEhNU9FUUURGSok2NQIxM0BAQ1tZXdVoZmdiZUxKSwAlKJI2NmIvLj85OisjJHZCRLMbGbYEAEtmbpkwLrQ7OYxMTZuFhScvMC8xNRxBQ9BfXTQbHCcUFgAWGFEnJ0BQUCoYGUc/QHZVW89NSjBUWAtGSXh7fIdDQl5sb5SYmISIiJdeXw0fIEoiIrxHRRYfIRM7QMdfXSw/QL8pJlFfX5hvb5MqKXh2dmlWVgBAQYFhYaBzc6yuSJ0AAADfdFJOUwD3/hQ5OTgCAQQg+g45Tf5v/vz4Gpos1vv89/ouMf79/fFu2q3s5anDkPsk1cr+YP3ILfu+PP3898yd9PmNdE7Kk8D7hPzukuXH+Pz8a4px/v5B/vn5kv////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7////////////////////////////////////+//////////////6TEl4rAAAESUlEQVRIx2NgGAWjgHqAgxOHODsuwAmW5AABVA14bGHnQijj5OSEKAVq52AWE2NjY+MN4mVFAF5eXllZLr9+PmYRZh5OmCVQTUrKitOT6+qS0mfOzAWBDx/27+8AgW1z5879YSAlpeqho+Ok4ijApw3SBMT6vZdbk6enz5iRLNcWHPC8evGaHj09JqaeNWurV5/beHTL7KKl2dlVS5csWRLvpeHPCdTDqbxIOLYl6Wn7W7PD6+e1X794ceFGQUF+wbOzOq61B974tcrH2yxLWEiSUVoovXDJX0seBgbTz3kJCQmHNz57dWV9YVxFXFwckBvb0lJXt/Ttm9evpx2Z9nDVyYzSmJlFyy9Jx1vcsGJgEEg1bmkonLv49Im2eStiYmIiI2NAZH5CbM2fF29eHF91etrk9q0nS1Oi7uRu2C4/z1qEwX0Zd0JD4e4zTdOete+JKCmJKIkCgqyIyPxkuVc/T3U1HV/15UBESUREVlTUyZlzLs+xZ1ABaslPODe16/htkBagTEpGRkZKVERk0oFvp06nFRTsvbn6zoqYiAiQrizzbXYMJsu4G/IPv79ftrd6xx6gBFBHXmpqXkZURO2BhycKouvru7rerZ+fCXHw1tB2WwbDPomEipl3e9IurO1eERkJ1JKX2tnZmZeSVfFy8uPo6LS0srKV5vMb8jMzgdpWhOwQZdAFacl91BPdOLV7fmZmDEhLcXFxKlBL9+2CBdFATY092ybGJjQAQUKF8HWQFq1YoJaVaY1TjgLNiswqBdoC1VJdFg0CjQtmzchJB4Na4ZeiQIdpHY7LvXs/rXHB0cKGhnyIy1LzSiMm7l5ctjMNrOXg0vL4xJrpQC02QIeZ9Emk1+Y8WFNWNuVsYWxCXGYEOMhKSyKTFh4rqK/fuTMtrWdfFUjLuunJE2122DKoL+NOjk0/d+bChZVbJh5uiY3LjCkBBmZEZkPywk9Nt2521dd/TJsA1AKyJrlGYa4dg2Yn97rDdbuPFRSs2TIjvaWlJSEfGDLA2E9qvTj5yPGmvbcK1j7Y1V9eGZ+YKLRh+3YFe2CCKY7PmTH39+Pzi2fV5YDA4djYhNjDOU/Ln7RNOwTUdL56UnZzZWX5ouXbL4ETjOl643XJyTUXn0+uvtaa2NqaCALx8fGVldnXr1xpazt0aPJqyeZdizYsv7S8SAqcLDnFvyrW1CSWz+qeHV80++qkTfz8/JMmbdq8Zfa1CbPknpw60eZqsEiSkRGY+OPrsr9bMoOymPzl7P7myqqqyk1r7vdMYQKCe4+mrjmz+Fj16o2bgFlsQ29v767sqqr+RYyevpzgbKkkrirV3N9f1TyhCAgmTJijMGfOvn0HDx68uvns2UnOjG5qauIOGuqa8IwMKgiYuUDFBRsLEjAykpGRkeVy6efjEeHhgZdmkOKCA6oPf6EELM7ghRKIi7vsA6nlwCj68Bew7KOVzCigEAAAop3jpH2nqD8AAAAASUVORK5CYII=">
<svg width="175" height="1300" viewBox="0 0 175 1300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 28 0 C -72 200 188 300 88 500 C -32 700 88 1100 148 1000 C 208 900 148 600 68 1000 C 28 1200 128 1300 128 1300"
stroke-width="4" stroke="#000" />
</svg>