<div class="sun">
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
</div>
html, body {
overflow: hidden;
background: #a02615;
padding: 0;
margin: 0;
}
.sun {
position: absolute;
top: -75px;
left: -75px;
width: 500px;
height: 500px;
animation: sun-spin 10s linear infinite;
}
.sun-ray {
width: 250px;
height: 40px;
background: url(//sergeche.github.io/gpu-article-assets/images/ray.png) no-repeat;
/* align rays with sun center */
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
transform-origin: 0 50%;
}
$rays: 12;
$step: 360 / $rays;
@for $i from 1 through $rays {
.sun-ray:nth-of-type(#{$i}) { transform: rotate(#{($i - 1) * $step}deg); }
}
@keyframes sun-spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.