CSS 传统方式实现曲线路径动画

PHOTO EMBED

Thu Apr 29 2021 07:55:50 GMT+0000 (Coordinated Universal Time)

Saved by @ycljcfer 

<div class="g-container">
    <div class="g-ball"></div>
</div>

.g-container {
    position: relative;
    width: 10vmin;
    height: 70vmin;
    transform-origin: center 0;
    animation: rotate 1.5s infinite alternate;
}
.g-ball {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #000);
    bottom: 0;
    left: 0;
}
@keyframes rotate {
    100% {
        transform: rotate(90deg);
    }
}
content_copyCOPY

https://github.com/chokcoco/iCSS/issues/113