Cách di chuyển phần tử theo đường tròn với CSS offset-path (Motion Path)

Giới thiệu

Chúng ta có thể định nghĩa đường chuyển động (motion path) cho một phần tử bằng thuộc tính CSS offset-path.

Cú pháp

Cú pháp của thuộc tính offset-path:

Selector { 
  offset-path: /*giá trị*/ 
}

Ví dụ

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: