<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> </head> <style> * { margin: 0; padding: 0; } .wrapper { width: 170px; height: 170px; margin: 20px; border: 1px solid #00FF7F; background-color: #fff; position: relative; overflow: hidden; border-radius: 3px; } .wrapper:after, .wrapper:before { content: ''; position: absolute; width: 240px; height: 240px; top: 50%; left: 50%; animation: active 8s linear infinite; transform-origin: 0 0; } .wrapper:after { background: linear-gradient(to left, #00FF7F, #fff); } .wrapper:before { animation-delay: -4s; background: linear-gradient(to left, #fff, #00FF7F); } @keyframes active { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .main, .content { position: absolute; width: 150px; height: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; border: 1px solid #ececec; background: #fff; z-index: 10; } .main:after, .main:before { content: ''; position: absolute; width: 240px; height: 240px; top: 50%; left: 50%; animation: activeMain 8s linear infinite; transform-origin: 0 0; z-index: -1; } .main:after { background: linear-gradient(to left, #3CB371, #fff); } .main:before { background: linear-gradient(to left, #fff, #20B2AA); animation-delay: -4s; } @keyframes activeMain { from { transform: rotate(90deg) } to { transform: rotate(450deg) } } </style> <body> <div class="wrapper"> <div class="main"></div> <div class="content"></div> </div> </body> </html>