A simple LED digital clock implementation method in CSS3

This should be something that many people have done. I just felt itchy and wanted to write about it, so I spent some time tinkering with it and added the Dark Mode processing.

First of all, it is very clear that this really does not require any technical skills, it just requires a bit of patience.

The LED numbers consist of two lines on the left and two lines on the right, and three lines in the middle, for a total of 7 lines. So, in order to make it easier to identify, I wrote it like this when writing the demo.

<div class="digital digital_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>

As for the function of digital_0, it is actually very simple. It exists to control the changes of the ten numbers from 0 to 9.

.digital_1 .c1,
.digital_1 .c2,
.digital_1 .c3,
.digital_1 .l1,
.digital_1 .l2,
.digital_2 .l1,
.digital_2 .r2,
.digital_3 .l1,
.digital_3 .l2,
.digital_4 .c1,
.digital_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,
.digital_0 .c2 {
  animation: changeDigital 200ms 0ms 1 ease-in forwards;
}

An animation is used here, and the duration is 200ms, mainly to create a transition effect when certain parts disappear.

@keyframes changeDigital {
  form {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

What remains is the most patience-demanding part, which is adjusting and controlling the positions of the seven lines, while also considering that each line has an angle and a slightly rounded feel. If you want a rounded feel, just use border-radius. As for the bevel, if you know how to draw a triangle with a border in CSS, then you should know how to make this bevel.

When we want to draw a triangle, the width and height are both 0, and then we use border-width to control the size of the final triangle. If we choose specific values ​​for width and height according to the position of the line, will it have a bevel effect?

Next, we need to pay attention to the horizontal line in the middle, which is the .c2 element. There are triangles protruding on both sides of the line. There are many ways to achieve this. Here I choose to use :after and :before superimposed.

The last step is to adjust the position of each element and control the size and position. Because it is operated using positioning, it is very simple to adjust.

.digital span {
  position: absolute;
  border-radius: 50vh;
  box-sizing: border-box;
}
.digital .c1,
.digital .c2,
.digital .c3 {
  height: 0;
  width: 26px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.digital .c1 {
  top: 0;
  left: 0;
  border-top: 4px solid currentColor;
}
.digital .c2 {
  top: 50%;
  left: 0;
  margin-top: -2px;
}
.digital .c2:before,
.digital .c2:after {
  content: "";
  height: 0;
  width: 24px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  box-sizing: border-box;
}
.digital .c2:before {
  position: absolute;
  top: 0;
  left: -3px;
  border-bottom: 2px solid currentColor;
}
.digital .c2:after {
  position: absolute;
  top: 2px;
  left: -3px;
  border-top: 2px solid currentColor;
}
.digital .c3 {
  bottom: 0;
  left: 0;
  border-bottom: 4px solid currentColor;
}
.digital .l1,
.digital .l2 {
  height: 21px;
  width: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 4px solid currentColor;
}
.digital .l1 {
  top: 1px;
  border-top-width: 4px;
}
.digital .l2 {
  top: 24px;
  border-bottom-width: 4px;
}
.digital .r1,
.digital .r2 {
  height: 21px;
  width: 0;
  right: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: 4px solid currentColor;
}
.digital .r1 {
  top: 1px;
  border-top-width: 4px;
}
.digital .r2 {
  top: 24px;
  border-bottom-width: 4px;
}

With that done, all that's left is to simply optimize the outer layer a bit, like tilting it a little.

.digital {
  position: relative;
  width: 26px;
  height: 46px;
  margin-left: 10px;
  transform: skew(-6deg);
}

Oh, I forgot to mention that I choose to use currentColor for the border color here, so that when switching to dark mode, I only need to change the text color and background color in the body. currentColor will select the text color to use.

After the styles are processed, the next step is to add some JS to display the clock. There is nothing much to say about this. Just put the two numbers in different divs. Here, when I take the unit digit, I use m%10 to get the remainder; when I take the ten digit, I use parseInt(m/10) to round it. After taking them out, just put them into the corresponding divs.

Demo address: http://lab.tianyizone.com/demo/digital_number.html

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.