CSS Challenge Day 042

css-challenge-day-042.markdown

CSS Challenge Day 042

Late but still decided to tackle this CSS Challenge for Day 42. Learned more things.

A Pen by Paul on CodePen.

License.

index.pug

.frame
  .center 
    - for(var i=0; i < 100; i++) {
        div(class="star star-"+i)
    - }
    - for(var i=0; i < 6; i++) {
        div(class="shooting-star shooting-star-"+i)
    - }

style.scss

$numOfStars: 100; // update together with html
$numOfShootingStars: 6; // update together with html

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.1);
	overflow: hidden;
  background: #607D8B;
  color: #fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 20%;
  left: 20%;
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 50%;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
}

@for $i from 1 through $numOfStars {
  .star-#{$i} {
    top: random(200) + px;
    left: random(200) + px;
    animation: ((random(15)+20)/10)+s twinkle (random(15)/ -10)+s infinite;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.shooting-star {
	position: absolute;
	top: 0;
	left: -120px;
	width: 120px;
	height: 2px;
	background: url(http://100dayscss.com/codepen/shooting-star.png) center center no-repeat;
	background-size: 100% 100%;
	transform: rotate(20deg);
}

@for $i from 1 through $numOfShootingStars {
  .shooting-star-#{$i} {
    top: (random(50) - 30)+px;
    animation: (random(5)+20)+s falling-star (random(250)/10)+s infinite;
  }
}

@keyframes falling-star {
  0% {
    transform: translate3d(0, 0, 0) rotate(25deg);
  }
  25%, 100% {
    transform: translate3d(350px, 200px, 0) rotate(25deg);
  }
}