<!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>Document</title> <style> div.box { width:100px; height: 100px; position: fixed; left: 45vw; top: 20vh; animation: turnBox 10s linear infinite; transform-origin: 0px 200px; } div.diqiu { width:100px; height: 100px; background: linear-gradient(rgb(243, 236, 236), rgb(72, 151, 241)); border-radius: 50px; animation: turn 20s linear infinite; text-align: center; line-height: 100px; } @keyframes turnBox { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes turn { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"> <div class="diqiu">Earth</div> </div> </body> </html>