Skip to content

Instantly share code, notes, and snippets.

@mahbubkhan88
Created February 9, 2023 05:42
Show Gist options
  • Save mahbubkhan88/b70716f73b4c8a3ddce5177bea54efb8 to your computer and use it in GitHub Desktop.
Save mahbubkhan88/b70716f73b4c8a3ddce5177bea54efb8 to your computer and use it in GitHub Desktop.
Pure CSS Particle Animation
.container
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg").background
p.message all your dreams can come true<br>if you have the courage to pursue them
- for (i = 1; i <= 100; i++)
.circle-container
.circle

Pure CSS Particle Animation

CSS particle animation without JavaScript. The most important point is random movement of particles. The vignetting was created by mask-image property.

A Pen by Takeshi Kano on CodePen.

License.

* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: #021027;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.background {
display: block;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
mask-image: radial-gradient(
white 0%,
white 30%,
transparent 80%,
transparent
);
}
.circle-container {
$particleNum: 200;
$particleColor: hsl(180, 100%, 80%);
position: absolute;
transform: translateY(-10vh);
animation-iteration-count: infinite;
animation-timing-function: linear;
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
mix-blend-mode: screen;
background-image: radial-gradient(
hsl(180, 100%, 80%),
hsl(180, 100%, 80%) 10%,
hsla(180, 100%, 80%, 0) 56%
);
animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
@keyframes fade-frames {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes scale-frames {
0% {
transform: scale3d(0.4, 0.4, 1);
}
50% {
transform: scale3d(2.2, 2.2, 1);
}
100% {
transform: scale3d(0.4, 0.4, 1);
}
}
}
$particleBaseSize: 8;
@for $i from 1 through $particleNum {
&:nth-child(#{$i}) {
$circleSize: random($particleBaseSize);
width: $circleSize + px;
height: $circleSize + px;
$startPositionY: random(10) + 100;
$framesName: "move-frames-" + $i;
$moveDuration: 28000 + random(9000) + ms;
animation-name: #{$framesName};
animation-duration: $moveDuration;
animation-delay: random(37000) + ms;
@keyframes #{$framesName} {
from {
transform: translate3d(random(100) + vw, $startPositionY + vh, 0);
}
to {
transform: translate3d(random(100) + vw, -$startPositionY - random(30) + vh, 0);
}
}
.circle {
animation-delay: random(4000) + ms;
}
}
}
}
.message {
position: absolute;
right: 20px;
bottom: 10px;
color: white;
font-family: "Josefin Slab", serif;
line-height: 27px;
font-size: 18px;
text-align: right;
pointer-events: none;
animation: message-frames 1.5s ease 5s forwards;
opacity: 0;
@keyframes message-frames {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment