hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a CSS bokeh effect with moving animation in just a few minutes
ready let's check it out
the key concept of this tutorial is very simple create circle color div elements
then used various CSS box shadow radius and rotation to create the animation but
manually coding CSS style and animation for each div is quite
impractical so in this tutorial I'm going to code in SCSS then use the
compiler to generate final CSS let's start with HTML we only need a
wrapper and particle divs you can add as many divs as you like
now the SCSS file first I'm going to define the size and position and
background color of the wrapper div
we also need to add overflow:hidden to hide any off-screen bokeh particles
and next we are going to define constant variables for this project first the
number of the particles this should be equal to the number of the div elements
you have next the particle size as big as you like next to the base opacity
we'll add this with random value later
and next base brightness again we'll add this with random value later
and the colorset these are colors that will be used to generate the particles
randomly I suggest using three but you can add more if needed
now for each div set the position to absolute and border-radius to 50% to
create a circle
then create a loop to iterate through each div
here we are going to start adding randomized value first I'm going to
create a randomized size which is the base size plus the random value then use
it to set width and height
next set top left to random value between zero to 100% boundary
next is color we are going to pick one from the colorset using nth function
and random value within the colorset length
the opacity same as above we will add base with some random value
now the box-shadow this will be a bit tricky instead of using background color
we are going to use the box shadow to represent the entire particle so we need
to offset the shadow with a value a bit larger than the particle size
then use random value for blur radius and set the shadow color using currentcolor
and finally add a brightness future with randomized value
here is what it looks like so far
now let's work on the animation create a linear infinite animation to rotate the
depth 360 degrees
the trick is we need to random a transform origin
so the particles are rotating from various point and appears to look like
they are actually moving
and finally set the animation duration this will be the movement speed so I'm
going to add a random value as well
we are all set let's see the result
so that's all for this tutorial hope you guys enjoy if you are looking for more
tutorial like this check out our Channel videos or subscribe to stay with us for
more updates thanks for watching and see you next time bye