CSS3で除夜の鐘を作った話

理由

• CSSアニメーションで遊びたかったため
• 煩悩APIという面白いものをみつけたため
• 年末で暇していたため

作り方

　鐘を撞いて煩悩をカウントアップしていくことを目標としていました。実際は鐘を撞くところまでしか完成していません。理由は末尾のCodePenに全て書いてあります。

まず鐘を作ります。

<div class="bell"></div>

@keyframes ring {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.bell {
  height: 200px;
  width: 150px;
  background-color: #444;
  margin-top: 100px;
  margin-left: 100px;
  border-radius: 100px 100px 100px 100px / 75px 75px 5px 5px;
  transform-origin: center top;
  animation: ring 1s linear 2s;
}

これで鳴るようになりました。

次に撞くものを作ります。

<div class="stick">
  <div class="torso"></div>
  <div class="upper"></div>
  <div class="lower"></div>
</div>

@keyframes kick {
  0% {
    margin-top: -500px;
    margin-left: 500px;
    transform: scale(2);
  }

  40% {
    margin-top: -200px;
    margin-left: 200px;
    transform: scale(1);
  }

  60% {
    margin-top: -200px;
    margin-left: 200px;
    transform: scale(1);
  }

  100% {
    margin-top: -500px;
    margin-left: 500px;
    transform: scale(2);
  }
}

.torso {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 25px;
  position: relative;
}

.torso:before {
   content: "";
   display: block;
   width: 10px;
   height: 75px;
   background: #000;
   top: 50px;
   left: 20px;
   position: absolute;
}

 .upper {
  width: 10px;
  height: 50px;
  background: #000;
  position: relative;
  margin-left: 20px;
  transform-origin: center top;
  transform: rotate(60deg);
} 

.upper:before {
   content: "";
   display: block;
   width: 10px;
   height: 30px;
   background: #000;
   position: absolute;
   transform-origin: center top;
   transform: rotate(-150deg);
}

.upper:after {
   content: "";
   display: block;
   width: 10px;
   height: 30px;
   background: #000;
   left: 25px;
   position: absolute;
   transform-origin: center top;
   transform: rotate(-200deg);
}

.lower {
  width: 10px;
  height: 50px;
  background: #000;
  position: relative;
  margin-left: 20px;
  margin-top: 25px;
  transform-origin: center top;
  transform: rotate(20deg);
}

.lower:before {
   content: "";
   display: block;
   width: 10px;
   height: 30px;
   background: #000;
   position: absolute;
   transform-origin: center top;
   transform: rotate(-100deg);
}

.lower:after {
   content: "";
   display: block;
   width: 10px;
   height: 30px;
   background: #000;
   left: 30px;
   position: absolute;
   transform-origin: center top;
   transform: rotate(30deg);
}

.stick {
  transform-origin: left bottom;
  transform: rotate(30deg);
  margin-top: -500px;
  margin-left: 500px;
  animation: kick 5s linear;
}

これで撞けるようになりました。

結果

See the Pen Joya bell by mnmtmym (@mnmtmym) on CodePen.

改良の余地しかないですので、これをベースに好みの除夜の鐘を作り上げましょう！！