<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body, div, ul, li { margin: 0; padding: 0; } div { 400px; height: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-animation: rot 2s linear infinite; animation: rot 2s linear infinite; } ul { 400px; height: 400px; position: relative; } ul:after { display: block; content: ""; clear: both; } li { list-style: none; 100px; height: 150px; background: -webkit-linear-gradient(red, blue, yellow, pink, blue); background: linear-gradient(red, blue, yellow, pink, blue); float: left; box-sizing: border-box; -webkit-border-radius: 100% 0%; -moz-border-radius: 100% 0%; border-radius: 100% 0%; } li:nth-child(1) { transform: rotate(108deg); position: absolute; top: 39px; left: 75px; } li:nth-child(2) { transform: rotate(145deg); position: absolute; top: 17px; left: 151px; } li:nth-child(3) { transform: rotate(192deg); position: absolute; top: 50px; right: 70px; } li:nth-child(4) { transform: rotate(234deg); position: absolute; top: 126px; right: 43px; } li:nth-child(5) { 50px; height: 50px; position: absolute; top: 50%; left: 50%; background: red; margin: -25px auto auto -25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } li:nth-child(6) { transform: rotate(-22deg); position: absolute; bottom: 16px; left: 139px; } li:nth-child(7) { transform: rotate(19deg); position: absolute; left: 68px; bottom: 55px; } li:nth-child(8) { transform: rotate(54deg); position: absolute; bottom: 124px; left: 44px; } li:nth-child(9) { transform: rotate(281deg); position: absolute; bottom: 43px; right: 71px; } @-webkit-keyframes rot { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rot { from { transform: rotate(0); } to { transform: rotate(360deg); } } </style> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
