Particle animations with SCSS

2019-05-21 16:09:26 +10:00
parent 36f260a811
commit 0e107e16a2
11 changed files with 2314 additions and 14 deletions
@@ -0,0 +1,59 @@
+
+.anim-container {
+    position: absolute;
+    width: 100%;
+    min-height: 100%;
+    transform-style: preserve-3d;
+}
+
+.blast-cast {
+    position: absolute;
+    background: black;
+    opacity: .7;
+    border-radius: 50%;
+}
+
+@for $i from 1 through 100 {
+    @keyframes blast-cast-#{$i} {
+      100% {
+        transform: translate3d(-3em +random(200)/200, 0, 0);
+      }
+    }
+}
+
+@for $i from 1 through 100 {
+  .blast-cast:nth-child(#{$i}){
+     $size: random(30)+px;
+     height: $size;
+     width: $size;
+     transform: translate3d( (random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
+     background: #15f4ee;
+     animation: blast-cast-#{$i} 0.7s;
+  }
+}
+
+.blast-hit {
+    position: absolute;
+    background: black;
+    opacity: .7;
+    border-radius: 50%;
+}
+
+@for $i from 1 through 100 {
+    @keyframes blast-hit-#{$i} {
+      100% {
+            transform: translate3d((random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
+      }
+    }
+}
+
+@for $i from 1 through 100 {
+    .blast-hit:nth-child(#{$i}){
+        $size: random(30)+px;
+        height: $size;
+        width: $size;
+        transform: translate3d(-3em +random(200)/200, 0, 0);
+        animation: blast-hit-#{$i} 0.7s infinite;
+        background: #15f4ee;
+     }
+}