はじめに

こんにちは! 中学2年生のWardHamamatsu67です! 今回は、HTMLとCSSのみで信号機らしきものを作ってみました。普通の3つある信号機ではなく矢印がいくつもあるおかしな信号機です。なお、矢印に関しては難しくて表示することができませんでした。もしできる方がいればコメントで教えてくれると嬉しいです。

HTMLのコード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>信号機</title>
        <link rel="stylesheet" href="./traffic_light.css">
    </head>
    <body>
  <div class="traffic-light">
    <div class="light green"></div>
    <div class="light yellow"></div>
    <div class="light red"></div>
    <div class="light yellow1"></div>
    <div class="light red1"></div>
  </div>
  <div class="traffic-light1">
    <div class="light lefton"></div>
    <div class="light leftunder"></div>
    <div class="light left"></div>
    <div class="light straight"></div>
    <div class="light right"></div>
    <div class="light righton"></div>
    <div class="light rightunder"></div>
  </div>
</body>
</html>

青看板の時同様、順番にdivタグを並べていくだけです。

CSSのコード

/* 信号機の本体 */
.traffic-light {
    width: 240px;
    height: 80px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #7c8085;
    border-radius: 25px;
  }
  
  /* 信号機の光 */
  .light {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: shadow 18s infinite;
  }
  
  /* 信号機の光に被せる要素 */
  .light::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0f1616;
    animation: light 18s infinite;
  }
  
  /* 信号機の光（緑） */
  .light.green {
    background-color: #2ecc71;
    color: #2ecc71;
  }
  
  /* 信号機の光（黄色） */
  .light.yellow {
    background-color: #f1c40f;
    color: #f1c40f;
    animation-delay: 3.6s;
  }
  
  .light.yellow::after {
    animation-delay: 3.6s;
  }
  
  .light.yellow1 {
    background-color: #f1c40f;
    color: #f1c40f;
    animation-delay: 10.8s;
  }
  
  .light.yellow1::after {
    animation-delay: 10.8s;
  }
  
  /* 信号機の光（赤） */
  .light.red {
    background-color: #df3f2e;
    color: #df3f2e;
    animation-delay: 10.8s;
  }
  
  .light.red1 {
    background-color: #df3f2e;
    color: #df3f2e;
    animation-delay: 14.4s;
  }
  
  .light.red::after {
    animation-delay: 10.8s;
  }
  
  .light.red1::after {
    animation-delay: 14.4s;
  }
  
  /* 信号機の光の影の部分のアニメーション */
  @keyframes shadow {
    0% {
      box-shadow: 0 0 20px 4px;
    }
    19% {
      box-shadow: 0 0 20px 4px;
    }
    20% {
      box-shadow: none;
    }
    100% {
      box-shadow: none;
    }
  }
  
  /* 信号機の光のアニメーション */
  @keyframes light {
    0% {
      background-color: transparent;
    }
    19% {
      background-color: transparent;
    }
    20% {
      background-color: #0f1616;
    }
    100% {
      background-color: #0f1616;
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  /* 信号機の本体 */
  .traffic-light1 {
    width: 240px;
    height: 80px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #7c8085;
    border-radius: 25px;
  }
  
  /* 信号機の光 */
  .light {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: shadow 18s infinite;
  }
  
  /* 信号機の光に被せる要素 */
  .light::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0f1616;
    animation: light 18s infinite;
  }
  
  /* 信号機の光（緑） */
  .light.green {
    background-color: #2ecc71;
    color: #2ecc71;
  }
  
  .light.lefton{
      background-color: #2ecc71;
      color: #2ecc71;
      animation-delay: 7.2s;
  }
  .light.lefton::after {
      animation-delay: 7.2s;
  }
  
  .light.leftunder{
      background-color: #2ecc71;
      color: #2ecc71;
      animation-delay: 7.2s;
  }
  .light.leftunder::after {
      animation-delay: 7.2s;
  }
  
  .light.left {
    background-color: #2ecc71;
    color: #2ecc71;
    animation-delay: 7.2s;
  }
  
  .light.left::after {
    animation-delay: 7.2s;
  }
  
  .light.straight {
    background-color: #2ecc71;
    color: #2ecc71;
    animation-delay: 3.6s;
  }
  
  .light.straight::after {
    animation-delay: 3.6s;
  }
  
  /* 信号機の光（黄色） */
  .light.yellow {
    background-color: #f1c40f;
    color: #f1c40f;
    animation-delay: 3.6s;
  }
  
  .light.yellow::after {
    animation-delay: 3.6s;
  }
  
  /* 信号機の光（赤） */
  .light.red {
    background-color: #df3f2e;
    color: #df3f2e;
    animation-delay: 7.2s;
  }
  
  .light.red::after {
    animation-delay: 7.2s;
  }
  
  .light.right{
      background-color: #2ecc71;
      color: #2ecc71;
      animation-delay: 7.2s;
  }
  .light.right::after {
      animation-delay: 7.2s;
  }
  
  .light.righton{
      background-color: #2ecc71;
      color: #2ecc71;
      animation-delay: 7.2s;
  }
  .light.righton::after {
      animation-delay: 7.2s;
  }
  
  .light.rightunder{
      background-color: #2ecc71;
      color: #2ecc71;
      animation-delay: 7.2s;
  }
  .light.rightunder::after {
      animation-delay: 7.2s;
  }
  
  
  /* 信号機の光の影の部分のアニメーション */
  @keyframes shadow {
    0% {
      box-shadow: 0 0 20px 4px;
    }
    19% {
      box-shadow: 0 0 20px 4px;
    }
    20% {
      box-shadow: none;
    }
    100% {
      box-shadow: none;
    }
  }
  
  /* 信号機の光のアニメーション */
  @keyframes light {
    0% {
      background-color: transparent;
    }
    19% {
      background-color: transparent;
    }
    20% {
      background-color: #0f1616;
    }
    100% {
      background-color: #0f1616;
    }
  }

はい。めちゃくちゃ難しいです。
ポイント1つ目は信号機の角をよく見ると丸まっているので、border-radiusで丸まっている部分の大きさを設定することです。
ポイント2つ目は「影」です。影を入れるタイミングを設定することで、信号機の色を1つだけ点灯させたりするなどということが出来ます。正直この作業が1番難しかったです。

完成図

色が多くて気持ち悪い見た目になってしまいましたが、主の架空都市ではこれが主流のようです(笑)

おわりに

正直これには過去一というレベルで苦戦しました。CSSでJavaScriptみたいに動きを設定するのは初めてでした。これのJavaScriptバージョンもいつか作ってみたいです。この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。

参考