こなああああああゆきいいいいいい ねぇ！！！

snowfall.css

@charset "utf-8";

/* labelと:checked擬似クラスで擬似onClick実装 */
#snowfall label {
  font-size: xx-large;
  fon-weight: bold;
  color: #fff;
  background-color: #99f;
  padding: .5em 1em;
  margin: 1em 0;
  cursor: pointer;
  border-radius: .5em;
  transition: 300ms;
}

#snowfall label:hover {
  background-color: #ccf;
}

#start_snowfall {
  display: none;
}

#start_snowfall + #snow {
  display: none;
}

#start_snowfall:checked + #snow {
  display: block;
}

/* 雪のアニメーション */
#snow > div {
  animation: fall 10s linear infinite normal,
             sway 2s ease-in-out infinite alternate;
  -webkit-animation: fall 10s linear infinite normal,
             sway 2s ease-in-out infinite alternate;
  position: fixed;
  top: -3em;
  width: 100%;
  z-index: 100;
}

#snow > div > div {
  position: absolute;
  width: 1em;
}

#snow > div > div > div {
  animation: spin 3s  linear infinite normal;
  -webkit-animation: spin 3s  linear infinite normal;
}

#snow > div > div > div:before {
  content: '＊';
  color: #fff;
  font-size: xx-large;
  text-shadow: 0 0 .4em #00f;
  transition: 300ms;
}

#snow > div > div > div:hover:before {
  text-shadow: 0 0 .4em #f00;
}

@keyframes fall {
  from { top: -3em; }
  to   { top: 100%; }
}

@keyframes sway {
  from { left: -2em; }
  to   { left: 2em; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@-webkit-keyframes fall {
  from { top: -1em; }
  to   { top: 100%; }
}

@-webkit-keyframes sway {
  from { left: -2em; }
  to   { left: 2em; }
}

@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

/* マウスオーバーで吹き出し */
#snow span{
  position: absolute;
  opacity: 0;
  top: -3em;
  left: -2em;
  width: 5em;
  padding: .5em;
  border-radius: .5em;
  background: #090;
  text-align: center;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transition: 300ms;
}

#snow span:before {
  line-height: 1em;
  content: 'メリクリ!!';
  color: #fff;
}

#snow span:after {
  position: absolute;
  top: 100%;
  left: 2.5em;
  height: 0;
  width: 0;
  border: .5em solid transparent;
  border-top: .5em solid #090;
  content: "";
}

#snow > div > div > div:hover + span {
  opacity: .8;
  top: -4em;
  transform: rotateY(0);
  -webkit-transform: rotateY(0);
}

snowfall.html

<form id="snowfall">
  <label for="start_snowfall">Snowfall!!</label>
  <input type="checkbox" id="start_snowfall" />
  <div id="snow">
    <div style="animation-delay:7s,1000ms;-webkit-animation-delay:7s,1000ms;"><div style="left: 5%"><div></div><span></span></div></div>
    <div style="animation-delay:4s, 400ms;-webkit-animation-delay:4s, 400ms;"><div style="left:15%"><div></div><span></span></div></div>
    <div style="animation-delay:2s,1200ms;-webkit-animation-delay:2s,1200ms;"><div style="left:25%"><div></div><span></span></div></div>
    <div style="animation-delay:9s,1800ms;-webkit-animation-delay:9s,1800ms;"><div style="left:35%"><div></div><span></span></div></div>
    <div style="animation-delay:1s, 200ms;-webkit-animation-delay:1s, 200ms;"><div style="left:45%"><div></div><span></span></div></div>
    <div style="animation-delay:5s, 800ms;-webkit-animation-delay:5s, 800ms;"><div style="left:55%"><div></div><span></span></div></div>
    <div style="animation-delay:3s,1600ms;-webkit-animation-delay:3s,1600ms;"><div style="left:65%"><div></div><span></span></div></div>
    <div style="animation-delay:0s,   0ms;-webkit-animation-delay:0s,   0ms;"><div style="left:75%"><div></div><span></span></div></div>
    <div style="animation-delay:6s,1400ms;-webkit-animation-delay:6s,1400ms;"><div style="left:85%"><div></div><span></span></div></div>
    <div style="animation-delay:2s, 600ms;-webkit-animation-delay:2s, 600ms;"><div style="left:95%"><div></div><span></span></div></div>
  </div>
</form>