はじめに
こんにちは! 中学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バージョンもいつか作ってみたいです。この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。
参考