CSS3 でのシンプルな LED デジタル時計の実装方法

これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダークモード処理を追加しました。

まず第一に、これには技術的なスキルはまったく必要なく、少しの忍耐力だけが必要であることは明らかです。

LED の数字は、左側に 2 行、右側に 2 行、中央に 3 行の合計 7 行で構成されています。そこで、判別しやすくするために、デモを書くときはこのように書きました。

<div class="デジタル デジタル_0">
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c3"></span>
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="r1"></span>
  <span class="r2"></span>
</div>

digital_0 の機能についてですが、実は非常に単純です。0 から 9 までの 10 個の数字の変化を制御するために存在します。

.デジタル_1 .c1,
.デジタル_1 .c2,
.デジタル_1 .c3,
.digital_1 .l1,
.digital_1 .l2,
.デジタル_2 .l1,
.digital_2 .r2,
.digital_3 .l1,
.digital_3 .l2,
.デジタル_4 .c1,
.デジタル_4 .c3,
.digital_4 .l2,
.digital_5 .l2,
.digital_5 .r1,
.digital_6 .r1,
.digital_7 .c2,
.digital_7 .c3,
.digital_7 .l1,
.digital_7 .l2,
.digital_9 .l2,
.デジタル_0 .c2 {
  アニメーション: changeDigital 200ms 0ms 1 前方へのイーズイン;
}

ここではアニメーションが使用されており、その持続時間は 200 ミリ秒で、主に特定の部分が消えるときに遷移効果を作成するために使用されます。

@keyframes 変更デジタル {
  形状 {
    不透明度: 1;
  }
  に {
    不透明度: 0;
  }
}

残るは、7 本の線の位置を調整して制御しながら、各線に角度とわずかに丸みがあることも考慮するという、最も忍耐力を要する部分です。丸みを持たせたい場合は、border-radius を使用します。ベベルについては、CSS で境界線付きの三角形を描く方法を知っていれば、このベベルを作成する方法も知っているはずです。

三角形を描画する場合、幅と高さは両方とも 0 で、border-width を使用して最終的な三角形のサイズを制御します。線の位置に応じて幅と高さに特定の値を選択すると、ベベル効果が得られますか?

次に、中央の水平線、つまり .c2 要素に注目する必要があります。線の両側に三角形が突き出ています。これを実現するにはさまざまな方法があります。ここでは、:after と :before を重ねて使用することにしました。

最後のステップは、各要素の位置を調整し、サイズと位置を制御することです。ポジショニングを使用して操作するため、調整は非常に簡単です。

.デジタルスパン{
  位置: 絶対;
  境界線の半径: 50vh;
  ボックスのサイズ: 境界線ボックス;
}
.デジタル .c1,
.デジタル .c2,
.デジタル .c3 {
  高さ: 0;
  幅: 26px;
  border-left: 4px 透明の実線;
  border-right: 4px 透明の実線;
}
.デジタル.c1 {
  上: 0;
  左: 0;
  border-top: 4px 実線 currentColor;
}
.デジタル .c2 {
  上位: 50%;
  左: 0;
  上マージン: -2px;
}
.デジタル .c2:前、
.デジタル .c2:after {
  コンテンツ： "";
  高さ: 0;
  幅: 24px;
  border-left: 2px 透明の実線;
  border-right: 2px 透明の実線;
  ボックスのサイズ: 境界線ボックス;
}
.デジタル .c2:before {
  位置: 絶対;
  上: 0;
  左: -3px;
  border-bottom: 2px 実線 currentColor;
}
.デジタル .c2:after {
  位置: 絶対;
  上: 2px;
  左: -3px;
  border-top: 2px 実線 currentColor;
}
.デジタル .c3 {
  下部: 0;
  左: 0;
  border-bottom: 4px 実線 currentColor;
}
.デジタル .l1,
.デジタル .l2 {
  高さ: 21px;
  幅: 0;
  左: 0;
  border-top: 2px 透明の実線;
  border-bottom: 2px 透明の実線;
  左境界線: 4px 実線 currentColor;
}
.デジタル .l1 {
  上: 1px;
  上境界線の幅: 4px;
}
.デジタル .l2 {
  上: 24px;
  境界線の下の幅: 4px;
}
.デジタル .r1,
.デジタル .r2 {
  高さ: 21px;
  幅: 0;
  右: 0;
  border-top: 2px 透明の実線;
  border-bottom: 2px 透明の実線;
  右境界線: 4px 実線 currentColor;
}
.デジタル .r1 {
  上: 1px;
  上境界線の幅: 4px;
}
.デジタル .r2 {
  上: 24px;
  境界線の下の幅: 4px;
}

それが完了したら、残っているのは外側のレイヤーを少し傾けるなどして最適化するだけです。

.デジタル{
  位置: 相対的;
  幅: 26px;
  高さ: 46px;
  左マージン: 10px;
  変換: skew(-6deg);
}

ああ、ここで境界線の色に currentColor を使用することを選択したことを言い忘れていました。そのため、ダークモードに切り替えるときに、本文のテキストの色と背景色のみを変更する必要があります。 currentColor は使用するテキストの色を選択します。

スタイルが処理されたら、次のステップは時計を表示するための JS を追加することです。これについては特に言うことはありません。2 つの数字を異なる div に配置するだけです。ここで、1 の位を取るときは、余りを取得するために m%10 を使用します。10 の位を取るときは、parseInt(m/10) を使用して丸めます。取り出した後は、対応する div に配置するだけです。

デモアドレス: http://lab.tianyizone.com/demo/digital_number.html

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

>>: JavaScriptの強力な演算子をいくつか見てみましょう