Skip to content

Instantly share code, notes, and snippets.

@mikurdi

mikurdi/dotcss-inspiration-1.markdown

Created November 29, 2022 18:55
Show Gist options
  • Save mikurdi/79f654e3597e33ae7fdd4000c0109a8c to your computer and use it in GitHub Desktop.
Save mikurdi/79f654e3597e33ae7fdd4000c0109a8c to your computer and use it in GitHub Desktop.
Download ZIP
DotCSS - Inspiration 1
Raw
index.html
<div class="window">
<div class="container">
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
<span class="particle"></span>
</div>
</div>
Raw
style.scss
@import 'compass';
body{
height: 100vh;
overflow: hidden;
background: black;
}
.window{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 800px;
}
.container{
transform-style: preserve-3d;
animation : rotate 25s infinite linear;
}
.particle{
position: absolute;
top:50%;
left:50%;
transform-style: preserve-3d;
&:before{
content:"";
width: 4px;
height: 4px;
position: absolute;
top: calc(50% - 2px);
left: calc(50% - 2px);
background: currentColor;
border-radius: 50%;
animation: invertRotate 25s infinite linear, scale 2s infinite linear;
box-shadow: 0 0 10px currentColor;
}
}
$amount : 300;
@for $i from 1 through $amount {
$theta : ($i / $amount)*120;
$phi : ($i / $amount) * pi();
$x : 250px * sin($phi) * cos($theta);
$y : 250px * sin($phi) * sin($theta);
$z : 250px * cos($phi);
.particle:nth-child(#{$i}){
transform: translate3d($x, $y, $z);
color: hsl(($i/$amount)*360,100%,50%);
&:before{
animation-delay: 0s, -($i/$amount)*2s;
}
}
}
@keyframes rotate{
to{transform:rotateY(360deg);}
}
@keyframes invertRotate{
to{transform:rotateY(-360deg);}
}
@keyframes scale{
0%, 45%,55%{ box-shadow: 0 0 10px 0px currentColor;}
50%{ box-shadow: 0 0 10px 5px currentColor;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment