/* 通常而言,沿着曲线运动的是物体的中心点(类比 transform-origin),在这里,我们可以通过 offset-anchor 改变运动的锚点,譬如,我们希望三角形的最下方沿着曲线运动 */ .ball { width: 40px; height: 40px; clip-path: polygon(0 0, 100% 50%, 0 100%); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); offset-anchor: 0 100%; background: linear-gradient(#fc0, #f0c); animation: move 3000ms infinite alternate linear; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter