2022年圣诞节到来啦，很高兴这次我们又能一起度过~

关于圣诞节🎄，大家想到什么颜色？⛄🦌🎁🎅🔥

demo online - https://codepen.io/adamlindqvist/pen/EaPeJg

html

<!-- Christmas Colors -->

<section class="sky">
<div class="color"><p>#F5624D</p></div>
<div class="color"><p>#CC231E</p></div>
<div class="color"><p>#34A65F</p></div>
<div class="color"><p>#0F8A5F</p></div>
<div class="color"><p>#235E6F</p></div>
</section>

css

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body, html {
  overflow:hidden;
  margin: 0;
  height: 100%;
  font-family: 'Lato';
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  color: #FFF;
  
}

.color {
 width: 20%;
 height: 100%;
 float: left
}

.color p {
  position: relative;
  z-index: 1231231;
  text-align: center;
  line-height: 90vh;
}

.color:nth-child(1){
  background-color: #F5624D;
}

.color:nth-child(2){
  background-color: #CC231E;
}

.color:nth-child(3){
  background-color: #34A65F;
}

.color:nth-child(4){
  background-color: #0F8A5F;
}

.color:nth-child(5){
  background-color: #235E6F;
}

.sky {
  height: 100%;
  color: #FFF;
  display: block;
}

js

// Snow from https://codepen.io/radum/pen/xICAB

(function () {

  var COUNT = 300;
  var masthead = document.querySelector('.sky');
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var width = masthead.clientWidth;
  var height = masthead.clientHeight;
  var i = 0;
  var active = false;

  function onResize() {
    width = masthead.clientWidth;
    height = masthead.clientHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = '#FFF';

    var wasActive = active;
    active = width > 600;

    if (!wasActive && active)
      requestAnimFrame(update);
  }

  var Snowflake = function () {
    this.x = 0;
    this.y = 0;
    this.vy = 0;
    this.vx = 0;
    this.r = 0;

    this.reset();
  }

  Snowflake.prototype.reset = function() {
    this.x = Math.random() * width;
    this.y = Math.random() * -height;
    this.vy = 1 + Math.random() * 3;
    this.vx = 0.5 - Math.random();
    this.r = 1 + Math.random() * 2;
    this.o = 0.5 + Math.random() * 0.5;
  }

  canvas.style.position = 'absolute';
  canvas.style.left = canvas.style.top = '0';

  var snowflakes = [], snowflake;
  for (i = 0; i < COUNT; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }

  function update() {

    ctx.clearRect(0, 0, width, height);

    if (!active)
      return;

    for (i = 0; i < COUNT; i++) {
      snowflake = snowflakes[i];
      snowflake.y += snowflake.vy;
      snowflake.x += snowflake.vx;

      ctx.globalAlpha = snowflake.o;
      ctx.beginPath();
      ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();

      if (snowflake.y > height) {
        snowflake.reset();
      }
    }

    requestAnimFrame(update);
  }

  // shim layer with setTimeout fallback
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  onResize();
  window.addEventListener('resize', onResize, false);

  masthead.appendChild(canvas);
})();