<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
div {
width: 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 {
width: 400px;
height: 400px;
position: relative;
}
ul:after {
display: block;
content: "";
clear: both;
}
li {
list-style: none;
width: 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) {
width: 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>
