圆环运动如下，小圆绕大圆运动
写法有如下两种：
1. transform-origin使用外部旋转点
2. transform-origin使用内旋转点，两圆重合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <style> *{margin: 0;border: 0;box-sizing: border-box;} body{padding-top: 100px;padding-left: 100px;display: flex;} .c1{ width: 200px; height: 200px; border: 2px solid salmon; border-radius: 50%; position: relative; margin: 0; } .c2{ width: 30px; height: 30px; border: 2px solid skyblue; border-radius: 50%; position: absolute; left: 50%; margin-left: -15px; margin-top: -15px; animation: rt1 linear infinite 4s; transform-origin: center 113px; /* 大圆半径 + 小圆半径 - 大圆border */ } @keyframes rt1 { 100% { transform: rotate(360deg); } } .d1{ width: 200px; height: 200px; border: 2px solid salmon; border-radius: 50%; display: grid; place-items: center; margin-left: 150px; } .d2{ width: 30px; height: 30px; border: 2px solid skyblue; border-radius: 50%; animation: rt2 linear infinite 4s; } @keyframes rt2 { 0% { transform: rotate(0) translate(-100px); } 100% { transform: rotate(360deg) translate(-100px); } } </style> </head> <body> <div class="c1"><div class="c2"></div></div> <div class="d1"><div class="d2"></div></div> </body> </html>