Meteor Animation

HTML
<div class="first"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="second"> <ul> <li></li> <li></li> </ul> </div> <div class="third"> <ul> <li></li> <li></li> <li class="floating-1"></li> <li class="floating-1"></li> <li class="floating-2"></li> <li class="floating-2"></li> </ul> </div> <div class="fourth"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="floating"></li> <li class="floating"></li> <li class="floating"></li> <li class="floating"></li> </ul> <span class="smile"></span> <span class="eyes"></span> <span class="cheeks"></span> </div> <div class=random-stars-container> <span class="random-stars"></span> <span class="random-stars"></span> <span class="random-stars"></span> <span class="random-stars"></span> </div>
SCSS
@import 'compass/css3'; /** design not mine. credits to design from dribbble designer MBE. here is the link : https://dribbble.com/shots/3345821-Electron. Just wanted to animate this because i loved it when i saw it **/ body { overflow:hidden; } $background:#0f111d; $color:#fff; $color2:#5048A0; $color3:#85EDE8; $color4:#48098b; @function randomNum($min, $max) { $rand: random(); $randomNum: $min + floor($rand * (($max - $min) + 1)); @return $randomNum; } @mixin keyframes($animationName) { @-webkit-keyframes #{"$animationName"} { @content; } @-moz-keyframes #{$animationName} { @content; } @-ms-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } } body { background:$background } canvas { position:absolute; left:50%; top:50%; @include transform(translate(-50%,-50%)); } div { width:100px; height:85px; @include border-radius(100px 0px 0px 100px); background:$color; box-shadow:0px 0px 14px $color; @include transform(translate(-50%,-50%)); left:50%; top:50%; position:absolute; ul { margin:0; padding:0; li { list-style:none; display:block; } } &:nth-child(1) { background-color:$color2; height:130px; width:145px; box-shadow: 2px 0px 10px $color2, -5px 0px 10px #5b2096; $delay : 0; $duration : 0; @for $i from 1 through 4{ $delay : $delay + 0.2; $width :0; $duration : $duration+randomNum(0.5,2.5); li:nth-child(#{$i}) { $width : randomNum(120,170)+px; width: $width; height:32.5px; background:$color2; background: linear-gradient(to right, $color2 60%, transparent); margin-left:70px; border-radius:80px; @include animation(glowbg 2s ease-in-out infinite); @include animation-delay($delay+s); @include animation-duration($duration+s); } } //end of li for loop } &:nth-child(2) { background-color:$color3; opacity:0.6; height:115px; width:130px; box-shadow: 0px 0px 15px $color3; li:nth-child(1) { width:170px; background: linear-gradient(to right, $color3 50%, transparent); height:30px; margin-left:50px; @include border-radius(200px); @include animation(glowbg 3s ease-in-out infinite); @include animation-delay(.5s); } li:nth-child(2) { width:160px; background: linear-gradient(to right, $color3 50%, transparent); height:40px; margin-left:50px; @include border-radius(200px); margin-top:45px; @include animation(glowbg 2.5s ease-in-out infinite); @include animation-delay(.8s); } } &:nth-child(3) { background-color:$color3; height:100px; width:100px; margin-left:-8px; box-shadow: 0px 0px 15px $color3; li:nth-child(1) { width:55px; height:10px; background:$color3; margin-left:50px; border-radius:300px; position:relative; left:0px; @include transition(all 0.3s ease); @include animation(anim1 1s ease infinite) } li:nth-child(2) { width:90px; height:10px; background:$color3; margin-left:50px; border-radius:300px; position:relative; margin-top:80px; left:0px; @include transition(all 0.3s ease); @include animation(anim1 1s ease infinite); @include animation-delay(.5s); } .floating-1 { @extend li:nth-child(1); position:absolute; top:0; box-shadow: 0px 0px 5px $color3; } .floating-2 { @extend li:nth-child(2); position:absolute; bottom:0; } li:nth-child(3).floating-1 { width:40px; left: 65px; @include animation(f1 2s ease-out infinite); } li:nth-child(4).floating-1 { width:15px; left: 115px; @include animation(f11 1.8s ease-out infinite); @include animation-delay(0s); } li:nth-child(5).floating-2 { width:30px; left: 0px; @include animation(f11 1s ease-out infinite); @include animation-delay(.3s); } li:nth-child(6).floating-2 { width:10px; left: 0px; @include animation(f11 1.5s ease-out infinite); @include animation-delay(.5s); } } &:nth-child(4) { width:80px; margin-left:-10px; height:80px; span { display:block; position:absolute; } .eyes { width:10px; height:10px; border-radius:100px; background:#000; top:30px; left:25px; &::after { content:""; width:10px; height:10px; border-radius:100px; background:#000; position:absolute; left:28px; } } .smile { position:absolute; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; width: 10px; height: 6px; background: transparent; border: 4px solid #000; left: 36px; top: 38px; &::before { background: #fff; width: 23px; height: 5px; content: ""; position: absolute; left: -5px; top: -5px; } } // end of smile .cheeks { width:10px; height:10px; background:$color3; display:block; position:absolute; @include border-radius(200px); top:40px; left:20px; &::after { content : ""; position:absolute; width:10px; height:10px; background:$color3; left:40px; top:0px; @include border-radius(200px); } } li{ position:relative; @include transition(all 0.2s ease); } li:nth-child(1) { width:90px; height:12px; background:#fff; left:50px; border-radius:200px; box-shadow: 0px 0px 10px #fff; @include animation(anim2 1.5s ease-out infinite) } li:nth-child(2) { background:radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 4px, #fff 5px); width:70px; height:10px; margin-left:50px; @include animation(anim3 1.6s ease-out infinite); @include animation-delay(0.5s); } li:nth-child(3) { width:105px; height:12px; background:#fff; left:45px; border-radius:200px; box-shadow: 0px 0px 10px #fff; @include animation(anim2 1.2s ease-out infinite); @include animation-delay(1s); } li:nth-child(4) { background:radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 4px, #fff 5px);; width:65px; height:10px; margin-left:70px; @include animation(anim3 2s ease-out infinite); @include animation-delay(0.5s); } li:nth-child(5) { width:85px; height:12px; background:#fff; left:60px; border-radius:200px; box-shadow: 0px 0px 10px #fff; @include animation(anim4 2s ease-out infinite); @include animation-delay(0.5s); } li:nth-child(6) { background:radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 5px, #fff 6px);; width:65px; height:12px; margin-left:75px; @include animation(anim3 1s ease-out infinite); @include animation-delay(0.5s); } li:nth-child(7) { width:100px; height:12px; background:#fff; left:55px; border-radius:200px; box-shadow: 0px 0px 10px #fff; @include animation(anim2 1.3s ease-out infinite); @include animation-delay(0.5s); } .floating { position:absolute; background:#fff; border-radius: 100px; @include transition(all 0.5s ease); box-shadow: 0px 0px 10px $color3; z-index:-2; opacity:0; } li:nth-child(8).floating { width:12px; height:12px; top: 0; left: 50px; @include animation(float1 3s ease infinite); @include animation-delay(.4s); } li:nth-child(9).floating { width:12px; height:12px; top: 22px; @include animation(float2 3s ease infinite); @include animation-delay(2.5s); } li:nth-child(10).floating { width:12px; height:12px; top: 44px; left: 50px; @include animation(float3 3s ease infinite); @include animation-delay(1.5s); } li:nth-child(11).floating { width:12px; height:12px; top: 67px; left: 50px; @include animation(float4 3s ease infinite); @include animation-delay(1.5s); } } } .random-stars-container{ width:100%; height:50%; background:transparent; box-shadow:none; z-index: -1; .random-stars { display:block; position:absolute; opacity:0; @include animation(stars-moving 2.5s ease infinite); } .random-stars:nth-child(1){ width:15px; height:15px; background:linear-gradient(to right, $color4, $color3); @include border-radius(100px); left: 500px; top:50px; @include animation-delay(.5s); @include animation-duration(2s); } .random-stars:nth-child(2){ width:10px; height:10px; background:linear-gradient(to right, $color3 30%, transparent); @include border-radius(100px); left: 0px; top:80px; } .random-stars:nth-child(3){ width:10px; height:10px; background:linear-gradient(to right, $color4 20%, transparent); @include border-radius(100px); left: 0px; top:130px; @include animation-delay(.8s); } .random-stars:nth-child(4){ width:12px; height:12px; background:$color3; @include border-radius(100px); left: 0px; top:230px; @include animation-delay(.2s); @include animation-duration(3.5s); } } @include keyframes(f1) { 0% {left:15px; width:70px} 50%{left:150px;opacity:.5; width:50px} 60%{left:150px;opacity:0; width:4px} 100%{left:15px;opacity:0; width:0px} } @include keyframes(f11) { 0% {left:65px;} 50%{left:185px;opacity:.5} 60%{opacity:0;left:185px} 100%{left:65px;opacity:0} } @include keyframes(anim1) { 0% {left:0px} 50% {left:30px} 100% {left:0xpx} } @include keyframes(anim2) { 0% {left:45px} 50% {left:65px} 100% {left:45px} } @include keyframes(anim3) { 0% {left:0px} 50% {left:5px} 100% {left:0px} } @include keyframes(anim4) { 0% {left:60px} 50% {left:80px} 100% {left:60px} } @include keyframes(float1) { 0% {left:50px;opacity:0} 50% {left:160px;opacity:1} 70% {left:160px;opacity:0} 100% {left:50px;opacity:0} } @include keyframes(float2){ 0% {left:60px;opacity:0} 50% {left:175px;opacity:1} 70% {left:175px;opacity:0} 100% {left:60px;opacity:0} } @include keyframes(float3){ 0% {left:50px;opacity:0} 50% {left:160px;opacity:1} 70% {left:160px;opacity:0} 100% {left:50px;opacity:0} } @include keyframes(float4){ 0% {left:50px;opacity:0} 50% {left:180px;opacity:1} 70% {left:180px;opacity:0} 100% {left:50px;opacity:0} } @include keyframes(glowbg) { 0% {width:120px}; 25% {width:200px} 100% {width:120px} } @include keyframes(stars-moving) { 0% { left:0;opacity:1} 50% { left:100%;opacity:1} 70% { left:100%;opacity:0} 100%{left:0;opacity:0} }
JAVASCRIPT
Expand for more options Login