CSS 动画可以帮助我们通过组合、旋转和平移等多种方式来变换元素。
以下示例说明了我们如何在圆形路径中移动元素。
<!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>输出结果
这将产生以下结果 -