Twinkling Christmas Lights

In this example below you will see how to do a Twinkling Christmas Lights with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ksr583, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ksr583 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twinkling Christmas Lights</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="holiday-logo">

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19636/rt-logo.png" />
<svg class="bulb" style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xml:space="preserve">
  <symbol id="bulb" x="0px" y="0px" viewBox="0 0 23.6 41.9" style="enable-background:new 0 0 23.6 41.9;">
    <path d="M5.6,0C2.3,4,0,9.8,0,16.7c0,8.6,5.3,25.2,11.8,25.2c6.9,0,11.8-16.7,11.8-25.3C23.6,9.7,21.1,4,17.8,0H5.6z"/>
  </symbol>
</svg>

<div class="xmas-lights">
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
  <span class="light-cord"></span>
  <div class="xmas-light">
    <svg><use xlink:href="#bulb"></use></svg>
  </div>
</div>
  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ksr583/twinkling-christmas-lights-zoKJpw */
body {
  padding: 2rem;
}

.holiday-logo {
  text-align: center;
  width: 300px;
}
.holiday-logo img {
  width: 100%;
}

.xmas-lights {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: 0 auto;
  width: 300px;
}

.xmas-light,
.light-cord {
  margin-right: -0.25em;
}

.xmas-light {
  position: relative;
  display: inline-block;
  font-size: 9.9999px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  z-index: 1;
}
.xmas-light:before {
  content: "";
  display: block;
  position: absolute;
  top: -.75em;
  left: .25em;
  height: .66em;
  width: .56em;
  border-radius: .1875em .1875em 0 0;
  background: #999;
  border: 1px solid #999;
  box-shadow: inset -1px 0px 0 0 rgba(255, 255, 255, 0.75);
}
.xmas-light:after {
  content: "";
  width: 0.75em;
  border-radius: 70%;
  position: absolute;
  top: 0%;
  bottom: 30%;
  right: 1px;
  -webkit-transform: scaleX(0.8);
          transform: scaleX(0.8);
  background: white;
  opacity: .25;
  background: radial-gradient(ellipse at center, white 0%, rgba(255, 255, 255, 0) 100%);
}
.xmas-light:nth-of-type(odd) use {
  fill: #DB2319;
  -webkit-animation-name: twinkle-red;
          animation-name: twinkle-red;
}
.xmas-light:nth-of-type(even) use {
  fill: #2358C9;
  -webkit-animation-name: twinkle-blue;
          animation-name: twinkle-blue;
}
.xmas-light:first-of-type {
  -webkit-transform: rotate(0.05turn) !important;
          transform: rotate(0.05turn) !important;
}
.xmas-light:last-of-type {
  -webkit-transform: rotate(-0.05turn) !important;
          transform: rotate(-0.05turn) !important;
}
.xmas-light:nth-of-type(3n + 1) {
  -webkit-transform: rotate(0.0188turn);
          transform: rotate(0.0188turn);
}
.xmas-light:nth-of-type(3n + 1) use {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.xmas-light:nth-of-type(3n + 2) {
  -webkit-transform: rotate(-0.0376turn);
          transform: rotate(-0.0376turn);
}
.xmas-light:nth-of-type(3n + 2) use {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}
.xmas-light:nth-of-type(3n + 3) {
  -webkit-transform: rotate(0.0564turn);
          transform: rotate(0.0564turn);
}
.xmas-light:nth-of-type(3n + 3) use {
  -webkit-animation-delay: 0.21s;
          animation-delay: 0.21s;
}
.xmas-light svg {
  height: 2em;
  width: 1.25em;
}
.xmas-light use {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.light-cord {
  display: inline-block;
  position: relative;
  top: -13.3333333333px;
  left: 0;
  z-index: 0;
  width: 33.3333333333px;
  height: 16.6666666667px;
  border-bottom: 2px solid #333;
  border-radius: 50%;
}

@-webkit-keyframes twinkle-red {
  0% {
    fill: #bb1e15;
  }
  50% {
    fill: #e84239;
  }
  100% {
    fill: #bb1e15;
  }
}

@keyframes twinkle-red {
  0% {
    fill: #bb1e15;
  }
  50% {
    fill: #e84239;
  }
  100% {
    fill: #bb1e15;
  }
}
@-webkit-keyframes twinkle-blue {
  0% {
    fill: #1f4eb3;
  }
  50% {
    fill: #386ddc;
  }
  100% {
    fill: #1f4eb3;
  }
}
@keyframes twinkle-blue {
  0% {
    fill: #1f4eb3;
  }
  50% {
    fill: #386ddc;
  }
  100% {
    fill: #1f4eb3;
  }
}

Comments