.container
- 30.times do
.circle
- 6.times do
.petal
-# %svg
-# %defs
-# %filter#drop-shadow
-# %feMorphology(operator="dilate" radius="1" in="SourceAlpha" result="dilated")
-# %feColorMatrix(in="dilated" type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0" result="colored")
-# %feMerge
-# %feMergeNode
-# %feMergeNode(in="SourceGraphic")
$bg: #51164a;
$border: #fff;
$count: 30;
$duration: 1.5s;
$spacing: .04em;
$angle: 60deg;
html, body { height: 100%; }
body {
overflow: hidden;
background: $bg;
}
@keyframes container {
from { transform: rotateX($angle) rotate(0deg) translateZ($count * $spacing / -2); }
to { transform: rotateX($angle) rotate(60deg) translateZ($count * $spacing / -2); }
}
.container {
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
font-size: 200px;
animation: container $duration linear infinite;
transform-style: preserve-3d;
}
.circle {
position: absolute;
top: 0; left: 0;
width: 1em; height: 1em;
margin: -.5em 0 0 -.5em;
background: $bg;
border-radius: 50%;
// filter: drop-shadow(1px 0 0 $border)
// drop-shadow(-1px 0 0 $border)
// drop-shadow(0 1px 0 $border)
// drop-shadow(0 -1px 0 $border);
// filter: url(#drop-shadow);
filter: drop-shadow(0 0 1px $border) drop-shadow(0 0 1px $border); // Best performance it seems
.petal {
background: inherit;
position: absolute;
top: 50%; left: 50%;
width: .55em; height: .55em;
// border: 1px solid #000;
border-radius: 50%;
@for $i from 0 to 6 {
@keyframes p#{$i} {
from, 16.66% { transform: translate(-50%, -50%) rotate($i * 60deg) translateX(.35em) scaleX(.4); }
to { transform: translate(-50%, -50%) rotate($i * 60deg) translateX(.35em) scaleX(.9); }
}
&:nth-child(#{$i + 1}) {
animation: p#{$i} $duration/2 ease-in-out alternate infinite;
}
}
}
@for $i from 0 to $count {
&:nth-child(#{$i + 1}) {
transform: translateZ($spacing * $i) rotate($i * 120deg / $count);
.petal { animation-delay: -1 * $i * $duration / $count; }
}
}
}
Also see: Tab Triggers