home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีเคลื่อนย้ายอิลิเมนต์ในเส้นทางวงกลมด้วย CSS

CSS Animations ช่วยให้เราเปลี่ยนรูปแบบอิลิเมนต์ได้หลายแบบโดยการรวม rotate และ translate

ตัวอย่าง

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 8%; 
  width: 35px; 
  height: 35px; 
  border-radius: 5px; 
  background: red; 
  animation: move 3s infinite linear; 
} 
@keyframes move { 
  0% { 
    transform: rotate(0deg) translateX(40px) rotate(0deg); 
  } 
  100% { 
    transform: rotate(360deg) translateX(40px) rotate(-360deg); 
  } 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

ผลลัพธ์

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

วิธีเคลื่อนย้ายอิลิเมนต์ในเส้นทางวงกลมด้วย CSS