<figure>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</figure>
@import "bourbon";
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
body {
@include linear-gradient(#121214, #343437);
}
figure {
position:absolute;
width:0;
height:0;
left:50%;
top:50%;
margin:-60px -50px;
@include transform-style(preserve-3d);
@include perspective(600);
span {
display:block;
position: absolute;
@include transform-origin(50% 100%);
&:after {
display:block;
content:'';
border-style: solid;
border-color: transparent;
border-width: 100px 58px 0;
@include backface-visibility(hidden);
}
$time : 2s;
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
@include transform(rotate3d(0, 0, 1, #{($i*60deg)+30deg}));
&:after {
border-top-color: adjust-hue(#ff0, $i*5);
@include transform(rotate3d(0.5, 1, 0, 180deg));
@include animation(split $time #{(0 + $i)*($time/18)} ease infinite);
}
}
}
}
}
@include keyframes(split) {
0% {
@include transform-origin(50% 100%);
@include transform(rotate3d(0.5, 1, 0, 180deg));
}
25% {
@include transform-origin(50% 100%);
@include transform(rotate3d(0, 1, 0, 360deg));
}
50% {
opacity:1;
@include transform-origin(100% 0%);
@include transform(rotate3d(0, 1, 0, 360deg));
}
75% {
opacity:0;
@include transform(rotate3d(0.5, 1, 0, 180deg));
}
100% {
opacity:1;
@include transform(rotate3d(0.5, 1, 0, 180deg));
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.