<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ padding: 100px; background-color: #000; } .box{ width: 200px; height: 200px; background-color: #eee; position: relative; border-radius: 50%; -webkit-animation: wheel-rotate 2s linear infinite; -moz-animation: wheel-rotate 2s linear infinite; animation: wheel-rotate 2s linear infinite; } @-webkit-keyframes wheel-rotate { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @keyframes wheel-rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @-moz-keyframes wheel-rotate { from{ -moz-transform: rotate(0deg); } to{ -moz-transform: rotate(360deg); } } .box:after{ display: block; content: ""; width: 10px; height: 10px; position: absolute; left: 30px; top: 30px; background-color: blue; } </style> </head> <body> <div class="box"></div> </body> </html>
