<!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; overflow: hidden; } .inner img { width: 100%; height: 100%; border-radius: 50%; -webkit-filter: blur(1px); transition-delay: 0.5s; transition: all 0.001s ease-in-out; } .out { width: 210px; height: 210px; border: 1px dashed red; border-radius: 50%; padding: 5px; margin: 250px auto; animation: spin 6s linear infinite; } .inner:hover img { transform: scale(1.1, 1.1); -webkit-filter: blur(0px); } </style> </head> <body> <div class="out"> <div class="inner"> <img src="1.jpg"> </div> </div> </body> </html>