<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css</title> </head> <body> <div id="example"></div> <div style="position:relative;width:100px;height:100px"> <div class="rotateline1"></div> <div class="rotateline2"></div> <div class="rotateline3"></div> </div> </body> </html> <style> .rotateline1{ position:absolute; left:0; top:0; width: 100%; height: 100%; border-radius:50%; border:4px solid transparent; border-left: 4px solid red; animation:spin .7s ease infinite; } .rotateline2{ position:absolute; left:10%; top:10%; width: 80%; height: 80%; border-radius:50%; border:4px solid transparent; border-left: 4px solid blue; animation:spin 1s ease infinite; } .rotateline3{ position:absolute; left:20%; top:20%; width: 60%; height: 60%; border-radius:50%; border:4px solid transparent; border-left: 4px solid green; animation:spin 1.2s ease infinite; } @keyframes spin{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } } </style>
