TAG
CSS
Result
Run
License
<div class="rotation"></div>
.rotation { width: 200px; height: 200px; border: 2px solid #CCC; border-radius: 50%; position: absolute; inset-block-start: calc((100vh - 200px) / 2); inset-inline-start: calc((100vw - 200px) / 2); } .rotation::after { content: ""; width: 50px; height: 50px; background-color: rgba(255, 0, 0, 0.7); display: inline-block; animation: rotate 5s linear infinite alternate; offset-path: path("M100,0 A50,50 0 1,1 100,200 A100,100 0 1,1 100,0"); } @keyframes rotate { to { offset-distance: 50%; } }
Console
expand_less
License
License
by DevDic
Close