.wrapper
- 6.times do
.slice
View Compiled
* {
box-sizing: border-box;
}
body { background: #222a2c; }
$baseSize: 100;
$baseColor: #42d2b0;
.wrapper {
position: relative;
margin: 50px auto;
width: 200px;
height: 200px;
//background: red;
}
.slice {
position: absolute;
top: 50%;
left: 50%;
width: #{$baseSize}px;
border: #{$baseSize}px solid transparent;
border-left-width: 58px;
border-right-width: 58px;
border-top-color: $baseColor;
transform: translate(-50%, -50%);
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
border-top-color: adjust-hue($baseColor, ($i - 1) * 10deg);
transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
animation: sparkleLoad-#{$i} 2s #{$i * 0.07}s infinite;
}
}
}
@for $i from 1 through 6 {
@keyframes sparkleLoad-#{$i} {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
}
25%,
75% {
opacity: 1;
transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.