LoginSignup
1
1

【HTML,CSS】HTML,CSSのみで気持ち悪い信号機らしきものを作ってみた

Last updated at Posted at 2024-03-27

はじめに

こんにちは! 中学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番難しかったです。

完成図

スクリーンショット 2024-03-27 181929.png
色が多くて気持ち悪い見た目になってしまいましたが、主の架空都市ではこれが主流のようです(笑)

おわりに

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

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1