Skip to content

Instantly share code, notes, and snippets.

@phedders
Created November 14, 2019 18:48
Show Gist options
  • Save phedders/4fa737a74b0d0e3358cb70fa47fcda71 to your computer and use it in GitHub Desktop.
Save phedders/4fa737a74b0d0e3358cb70fa47fcda71 to your computer and use it in GitHub Desktop.
CSS Glowing Particle Animation
%div.wrap
-200.times do
%div.c
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
html, body {
height: 100%;
}
body {
min-height: 100%;
overflow: hidden;
background: black;
background: radial-gradient(circle at center, #222, black 30%);
}
.wrap {
height: 100%;
min-height: 100%;
position: relative;
transform-style: preserve-3d;
perspective: 500px;
}
@function posOrNeg(){
@return random() * 2 - 1;
}
$total: 200;
$size: 30;
.c {
position: absolute;
width: $size+px;
height: $size+px;
margin-top: -$size/2+px;
margin-left: -$size/2+px;
transform: translate3d(50vw,50vh, -1000px);
border-radius: 50%;
}
@for $i from 1 through $total {
$color: hsl(($i * .1)+70, 100%, 50%);
.c:nth-child(#{$i}){
animation: anim#{$i} 1.5s infinite alternate;
animation-delay: $i * -.015s;
background: $color;
background: radial-gradient(circle at top left, lighten($color, 15%), $color);
box-shadow: 0 0 25px 3px lighten($color, 5%);
border: 1px solid $color;
}
@keyframes anim#{$i}{
80% {
opacity: 1;
}
100% {
transform: translate3d(random(100)+vw, random(100)+vh, 0);
opacity: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment