#1 in 2021 / Happy New Year / CSS Stylus Pug

1-in-2021-happy-new-year-css-stylus-pug.markdown

#1 in 2021 / Happy New Year / CSS Stylus Pug

A Pen by Toshiya Marukubo on CodePen.

License.

index.pug

- var text1 = ['H', 'a', 'p', 'p', 'y'];
- var text2 = ['N', 'e', 'w'];
- var text3 = ['Y', 'e', 'a', 'r', '.'];
h1
  each i in text1
    span #{i}
  br
  each i in text2
    span #{i}
  br
  each i in text3
    span #{i}
h2 
  span Let's have fun this year : )
.criterion
  - for (var i = 0; i < 7; i++) 
    .shape
      - for (var j = 0; j < 12; j++)
        span.innerShape

style.stylus

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/**
* get random number.
* @param {number} min - min number.
* @param {number} max - max number.
*/

random(min,max)
  return floor(math(0, 'random') * (max - min + 1) + min)

_number_of_shapes = 7;
_mult_num = 360 / _number_of_shapes;
_width = 20;
_height = 20;

*, *::before, *::after
  box-sizing: border-box;

html, body
  height: 100vh;
  width: 100vw;
  
body
  font-family: 'Montserrat', sans-serif;
  background: #FFF;
  position: relative;
  overflow: hidden;
  font-size: 67.5%;

.criterion
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  transform: translate(-(_width / 2 + 1)px, -(_height / 2 + 1)px);

h1
  font-size: 2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  animation: h1-animation 0.8s ease-in-out 10.3s 1 forwards normal;
  & > span
    display: inline-block;
    line-height: 1.6;
    letter-spacing: 0.2rem;
  for i in (0..13)
    span:nth-of-type({i + 1})
      opacity: 0;
      animation: text-animation + i 0.8s ease-in-out 7s + (i * 100)ms 1 forwards normal;

h2
  font-size: 1.2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(1, 1);
  & > span
    display: inline-block;
    opacity: 0;
    animation: span-animation 0.8s ease-in-out 11s 1 forwards normal;
    &::after
      content: '';
      position: absolute;
      display: block;
      top: 30px;
      width: 0%;
      height: 2px;
      background-color: #000;
      animation: line-animation 0.8s ease-in-out 11.8s 1 forwards normal;

@keyframes line-animation
  0%
   width: 0%;
  100%
   width: 100%;
    
@keyframes span-animation
  0%
    transform: translateY(10px);
    opacity: 0;
  100%
    transform: translateY(0);
    opacity: 1;
    
@keyframes h1-animation
  0%
    transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
  100%
    transform: translate(-50%, -50%) scale(0, 0) rotate(360deg);
    
for i in (0..13)
  @keyframes text-animation{i}
    0%
      opacity: 0;
      transform: translateY(10px);
    100%
      opacity: 1;
      transform: translateY(0);
      
span.innerShape
  position: absolute;
  width: _width px;
  height: _height px;
  border-radius: 50%;
  transform: scale(0, 0);

.shape
  position: absolute;
  width: _width px;
  height: _height px;
  border-radius: 50%;
  for i in (0.._number_of_shapes)
    &:nth-of-type({i + 1})
      border: solid 1px hsl(_mult_num * i, 80%, 60%);
      background-color: hsl(_mult_num * i, 80%, 60%);
      left: 0;
      top: 0;
      animation: shape-animation + i 10s ease-in-out 1.4s + (i * 200)ms 1 forwards normal,
                 shape-rotate-animation 0.8s ease-in-out 9.6s + (i * 100)ms 1 forwards normal;
      for j in (0..12)
        & > span:nth-of-type({j + 1})
          background-color: hsl(i * _mult_num, 80%, 60%);
          left: 0;
          top: 0;
          animation: innerShape-animation + j 1s ease-in-out (i * 200)ms forwards normal,
                     innerShape2-animation + j 2s ease-in-out 8.3s + (i * 100)ms 1 forwards normal;

@keyframes shape-rotate-animation
  0%
    transform: scale(10, 10) rotate(0deg);
  100%
    transform: scale(0, 0) rotate(360deg);
                     
for i in (0..12)
  @keyframes innerShape-animation{i}
    0%
      left: 0;
      top: 0;
      transform: scale(1, 1);
      opacity: 1;
    100%
      left: cos(i * 30 deg) * 100 px;
      top: sin(i * 30 deg) * 100 px;
      transform: scale(0, 0);
      opacity: 1;
  @keyframes innerShape2-animation{i}
    0%
      left: 0;
      top: 0;
      transform: scale(0, 0);
      opacity: 1;
    100%
      left: cos(i * 30 deg) * 100 px;
      top: sin(i * 30 deg) * 100 px;
      transform: scale(0.5, 0.5);
      opacity: 1;
      
for i in (0.._number_of_shapes)
  @keyframes shape-animation{i}
    0%
      left: 0;
      top: 0;
      transform: scale(0, 0);
      border-radius: 50%;
      opacity: 1;
      background-color: hsl(_mult_num * i, 80%, 60%);
    10%
      left: 0;
      top: 0;
      transform: scale(50, 50);
      border-radius: 50%;
      opacity: 0;
    15%
      left: 0;
      top: 0;
      transform: scale(0, 0);
      border-radius: 50%;
      opacity: 0;
    30%
      left: -(i * _width * 2) + _width * 2 * 2.5 + _width px;
      top: 0;
      transform: scale(1, 1);
      opacity: 1;
      border-radius: 50%;
    35%
      left: -(i * _width * 2) + _width * 2 * 2.5 + _width px;
      top: 0;
      transform: scale(10, 10) rotate(0deg);
      opacity: 1;
      border-radius: 0%;
    40%
      left: 0;
      transform: scale(1, 1) rotate(180deg);
      background-color: hsl(_mult_num * i, 80%, 60%);
    45%
      transform: scale(5, 5) rotate(0deg);
      background-color: transparent;
    50%
      left: 0;
      top: 0;
      transform: scale(10, 10);
      opacity: 1;
      border-radius: 0%;
      background-color: transparent;
    100%
      left: 0;
      top: 0;
      transform: scale(10, 10);
      opacity: 1;
      border-radius: 0%;
      background-color: transparent;