CodePen Embed - Christmas

<body>
    <div class="light">
        <ul class="line">
            <li class="red"></li>
            <li class="yellow"></li>
            <li class="blue"></li>
            <li class="pink"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="pink"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="pink"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="pink"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
          
        </ul>
    </div>

    <h1>Merry Christmas ! </h1>
<!-- 
<section class="rotatingText">
  <div class="rotatingText-content">
    <h2 class="rotatingText-adjective">beautiful</h2>
    <h2 class="rotatingText-adjective">maintainable</h2>
    <h2 class="rotatingText-adjective">perfect 👌</h2>
  </div>
</section>
 -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</body>

$green: #24D024;
$yellow: #fff952;
$pink: #f53896;
$red: #fb4545;
$blue: #0A53DE;
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
body {
    background-color: #000000;
  overflow : hidden; 
}

h1 {
    font-family: 'Lobster', cursive;
    font-size: 80px;
    text-align: center;
    color: white;
    letter-spacing: 3px;
}

.drop {
    position: absolute;
    top: 0;
    z-index: 1;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px #FFF
}

.animate {
    animation: falling 5.5s infinite ease-in;
}

@keyframes falling {
    0% {
        top: -10px;
        // opacity: 1;
    }
    10% {
        transform: translateX(-5px)
    }
    20% {
        transform: translateX(5px)
    }
    30% {
        transform: translateX(-5px)
    }
    40% {
        transform: translateX(5px)
    }
    60% {
        transform: translateX(-5px)
    }
    70% {
        transform: translateX(5px)
    }
    80% {
        transform: translateX(-5px)
    }
    90% {
        transform: translateX(5px)
    }
    95% {
        opacity: 1
    }
    100% {
        top: 95vh;
        opacity: 0;
    }
}

.line{
  text-align: center; 
}

.line li {
    position: relative;
    margin: 0 15px;
    list-style: none;
    padding: 0;
    display: inline-block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    top: 35px;
    background: #fff;
    &:before {
        content: "";
        position: absolute;
        background: #222;
        width: 10px;
        height: 9px;
        border-radius: 3px;
        top: -4px;
        left: 1px;
    }
    &:after {
        content: "";
        top: -14px;
        left: 9px;
        position: absolute;
        width: 52px;
        height: 19px;
        border-bottom: solid #222 2px;
        border-radius: 30%;
    }
}

.line .red {
    background-color: $red;
    animation: lightningRed 1s infinite;
}

.line .green {
    background-color: $green;
    animation: lightningGreen 1.5s infinite;
}

.line .yellow {
    background-color: $yellow;
    animation: lightningYellow 2s infinite;
}

.line .blue {
    background-color: $blue;
    animation: lightningBlue 2.5s infinite;
}

.line .pink {
    background-color: $pink;
    animation: lightningPink 2s infinite;
}

@keyframes lightningRed {
    0% {
        box-shadow: 5px 10px 35px 10px $red;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 10px 35px 10px $red;
    }
}

@keyframes lightningGreen {
    0% {
        box-shadow: 5px 0 35px 10px $green;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $green;
    }
}

@keyframes lightningYellow {
    0% {
        box-shadow: 5px 0 35px 10px $yellow;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $yellow;
    }
}

@keyframes lightningBlue {
    0% {
        box-shadow: 5px 0 35px 10px $blue;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $blue;
    }
}

@keyframes lightningPink {
    0% {
        box-shadow: 5px 0 35px 10px $pink;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $pink;
    }
}

@media (max-width: 1024px) {
  .line{
    padding: 0; 
  }
    li {
        margin: 0 15px 20px 15px;
    }
}


.rotatingText { 
  align-items: center;
  display: flex;
  height: 100vh;
  text-align: center;
}

.rotatingText-content { 
  position: relative;
  width: 100%;
}

.rotatingText-description { 
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 14px;
  margin: 0;
  color : white;
  
  @media (min-width: 768px) { 
    font-size: 18px;
  }
}

// .rotatingText-adjective { 
  
//   font-size: 40px;
//   left: 0;
//   margin-bottom: 0;
//   margin-top: 30px;
//   opacity: 0;
//   position: absolute;
//   right: 0;
//   text-align: center;
//   text-transform: uppercase;
//   top: 0;
//   color : white;
//   @media (min-width: 768px) { 
//     font-size: 70px;
//   }
  
//   &:nth-of-type(1) { 
//     animation: rotate-text-up 1.5s .75s infinite; 
//   }
  
//   &:nth-of-type(2) { 
//     animation: rotate-text-up 1.5s 2s infinite; 
//   }  
  
//   &:nth-of-type(3) { 
//     animation: fade-text-in 1.5s 3.25s infinite;
//   }
// }

// // Animations
// @keyframes rotate-text-up { 
//   0% {
//     transform: translate3d(0, 80px, 0);
//     opacity: 0;
//   }
  
//   20%, 80% {
//     transform: translate3d(0, 0, 0);
//     opacity: 1;
//   }
  
//   100% {
//     transform: translate3d(0, -40px, 0);
//     opacity: 0;
//   }
// }

// @keyframes fade-text-in { 
//   0% {
//     opacity: 0;
//     transform: translate3d(0, 80px, 0);
//   }
  
//   50%, 100% {
//     opacity: 1;
//     transform: translate3d(0, 0, 0);
//   }
// }

View Compiled

//----------------------www.maureenhaddadi.com--------------//

$(function() {

    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };

    var limit_flake = 50;
    setInterval(function() {
        let dimension = randomInt(3, 9) + "px";
        var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>";
        $('body').append(flake);

        var list_flake = $('.drop');
        if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove();
    }, 200);
})

This Pen is owned by Maureen Haddadi on CodePen.

See more by @maureenhaddadi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.