วิธีเคลื่อนย้ายอิลิเมนต์ในเส้นทางวงกลมด้วย CSS offset-path (Motion Path)

เราสามารถกำหนดเส้นทางการเคลื่อนที่ (Motion Path) ให้กับอิลิเมนต์ได้โดยใช้คุณสมบัติ offset-path ใน CSS

ไวยากรณ์ (Syntax)

Selector { 
  offset-path: /*value*/ 
}

ตัวอย่าง

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 5%; 
  width: 35px; 
  height: 35px; 
  offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0'); 
  animation: round 3000ms infinite ease-in-out; 
  background: darkseagreen; 
  border-radius: 30%; 
} 
@keyframes round { 
  0% { 
    offset-distance: 0%; 
  } 
  100% { 
    offset-distance: 100%; 
  } 
} 
</style> 
</head> 
<body> 
<hr/> 
<div></div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: