<!DOCTYPE html> <html> <head> <title>rotate</title> <style type="text/css"> * { margin: 0px; padding: 0px; box-sizing: border-box; border: none; } body { margin: 0; padding: 0; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .inner { width: 100%; height: 100%; border-radius: 50%; background-color: #FF00FF; } .inner img { width: 100%; height: 100%; border-radius: 50%; } .out { width: 210px; height: 210px; border: 1px dashed red; border-radius: 50%; padding: 5px; animation: spin 6s linear infinite; } </style> </head> <body> <div class="out"> <div class="inner"> <img src="1.jpg"> </div> </div> </body> </html>
时间: 2024-11-05 13:34:58