mirror of
https://github.com/TrudeEH/web.git
synced 2025-12-06 08:23:37 +00:00
65 lines
1.3 KiB
Sass
65 lines
1.3 KiB
Sass
// n is number of stars required
|
|
@function multiple-box-shadow ($n)
|
|
$value: '#{random(2000)}px #{random(2000)}px #ebebeb'
|
|
@for $i from 2 through $n
|
|
$value: '#{$value} , #{random(4000)}px #{random(2000)}px #ebebeb'
|
|
|
|
@return unquote($value)
|
|
|
|
$shadows-small: multiple-box-shadow(1400)
|
|
$shadows-medium: multiple-box-shadow(400)
|
|
$shadows-big: multiple-box-shadow(200)
|
|
|
|
#stars
|
|
width: 1px
|
|
height: 1px
|
|
background: transparent
|
|
box-shadow: $shadows-small
|
|
animation: animStar 50s linear infinite
|
|
|
|
&:after
|
|
content: " "
|
|
position: absolute
|
|
top: 2000px
|
|
width: 1px
|
|
height: 1px
|
|
background: transparent
|
|
box-shadow: $shadows-small
|
|
|
|
#stars2
|
|
width: 2px
|
|
height: 2px
|
|
background: transparent
|
|
box-shadow: $shadows-medium
|
|
animation: animStar 100s linear infinite
|
|
|
|
&:after
|
|
content: " "
|
|
position: absolute
|
|
top: 2000px
|
|
width: 2px
|
|
height: 2px
|
|
background: transparent
|
|
box-shadow: $shadows-medium
|
|
|
|
#stars3
|
|
width: 3px
|
|
height: 3px
|
|
background: transparent
|
|
box-shadow: $shadows-big
|
|
animation: animStar 150s linear infinite
|
|
|
|
&:after
|
|
content: " "
|
|
position: absolute
|
|
top: 2000px
|
|
width: 3px
|
|
height: 3px
|
|
background: transparent
|
|
box-shadow: $shadows-big
|
|
|
|
@keyframes animStar
|
|
from
|
|
transform: translateY(0px)
|
|
to
|
|
transform: translateY(-2000px) |