HTML
<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
<li class="item-4"></li>
<li class="item-5"></li>
<li class="item-6"></li>
<li class="item-7"></li>
<li class="item-8"></li>
<li class="item-9"></li>
<li class="item-10"></li>
<li class="item-11"></li>
<li class="item-12"></li>
<li class="item-13"></li>
<li class="item-14"></li>
<li class="item-15"></li>
<li class="item-16"></li>
<li class="item-17"></li>
<li class="item-18"></li>
<li class="item-19"></li>
<li class="item-20"></li>
<li class="item-21"></li>
<li class="item-22"></li>
<li class="item-23"></li>
<li class="item-24"></li>
<li class="item-25"></li>
<li class="item-26"></li>
<li class="item-27"></li>
<li class="item-28"></li>
<li class="item-29"></li>
<li class="item-30"></li>
<li class="item-31"></li>
<li class="item-32"></li>
<li class="item-33"></li>
<li class="item-34"></li>
<li class="item-35"></li>
<li class="item-36"></li>
</ul>
SCSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
ul {
width: 200px;
height: 200px;
position: relative;
transform-origin: 50% 50%;
transform: rotate(-20deg);
animation: rotate 10s linear infinite;
list-style-type: none;
}
li {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
transform-origin: bottom center;
border-radius: 50% 0 50% 50%;
}
@for $i from 1 through 36 {
li:nth-child(#{$i}){
transform: rotate($i*10deg);
background: hsla($i*10.5, 80, 60, 0.15);
}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
