Skip to content

Instantly share code, notes, and snippets.

@danieldallen

danieldallen/index.pug

Created July 23, 2020 01:38
Show Gist options
  • Save danieldallen/2904a5a233ef5c7a5e9538dacc5e0eaa to your computer and use it in GitHub Desktop.
Save danieldallen/2904a5a233ef5c7a5e9538dacc5e0eaa to your computer and use it in GitHub Desktop.
Download ZIP
Only CSS: Star Planet
Raw
index.pug
.sky
- for (i = 0; i < 200; i++)
.star
Raw
only-css-star-planet.markdown
Raw
style.scss
body {
background: radial-gradient(ellipse at center, #1b2749 0%, #090a0f 80%);
height: 100vh;
overflow: hidden;
}
.sky {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
clip-path: circle(200px at center);
}
.star {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: #fff;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
// => https://bennettfeely.com/clippy/
animation: bling 6000ms linear infinite;
@for $i from 1 through 200 {
&:nth-child(#{$i}) {
top: calc(50% - #{random(400) - 200px});
left: calc(50% - #{random(400) - 200px});
animation-delay: random(6000) * -1ms;
}
}
}
@keyframes bling {
0% {
transform: scale(0) rotateZ(45deg) translate(-300px);
background: #ff00ff;
}
50% {
transform: scale(1) rotateZ(45deg) translate(0);
background: #ffffff;
}
100% {
transform: scale(0) rotateZ(45deg) translate(300px);
background: #0000ff;
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment