Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background-color: #ccc; } .mover { width: 70px; height: 70px; background: linear-gradient(#8ebf42 50%, #1c87c9 50%); position: absolute; left: 40%; top: 100px; offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z"); offset-rotate: reverse; animation: move 4s linear infinite; } @keyframes move { 100% { offset-distance: 100%; } } </style> <body> <h2>Offset-rotate property example</h2> <div class="mover"></div> </body> </html>