Set the stage

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style type="text/css">
      html.body {
        width: 100%;
        height: 100%;
        background-color: # 000;
        overflow: hidden;
      }

      /* Set the visual distance to 1000px and transform the child elements in 3D */
      .preserve {
        transform-style: preserve-3d;
        perspective: 1000px;
      }

      / * * / container
      .container {
        position: relative;
        margin-top: 10vh;
        text-align: center;
        /* animation: rotateReverse 10s infinite linear; * /
      }

      / * * / stage
      .stage {
        transform: rotateX(10deg) rotateZ(0);
        /* animation: rotate 10s infinite linear; * /
      }
      /* Digital style */
      .number {
        position: relative;
        width: 3vw;
        height: 12vw;
        display: inline-block;
        margin: 3vw 3vw 0 0;
      }

      .line {
        position: absolute;
        top: 0;
        left: 0;
        width: 3vw;
        height: 2px;
        background: # 181919;
      }

      .line::before..line::after {
        content: "";
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: #34eabc;
        box-shadow: 0 0 1vw #0bfdfd, inset 0 0 0.125 vmin #0bfdfd;
      }
      .line::before {
        left: 0;
        transition: all 0.5 s ease-in;
      }
      .line::after {
        right: 0;
        transition: all 0.5 s ease-out;
      }

      /* Calculate the position of each line */
      .line:nth-child(1) {
        top: -0.2 vw;
      }
      .line:nth-child(2) {
        top: 3.2 vw;
      }
      .line:nth-child(3) {
        top: 6.6 vw;
      }

      .line:nth-child(4) {
        transform: rotate(90deg) translateY(0.2 vw);
        /* Set the center of rotation to the left-most element midpoint */
        transform-origin: 0 center;
      }
      .line:nth-child(5) {
        transform: rotate(-90deg) translateY(0.2 vw);
        /* Set the center of rotation to the right-most element midpoint */
        transform-origin: 100% center;
      }

      .line:nth-child(6) {
        top: 3.4 vw;
        transform: rotate(90deg) translateY(0.2 vw);
        transform-origin: 0 center;
      }
      .line:nth-child(7) {
        top: 3.4 vw;
        transform: rotate(-90deg) translateY(0.2 vw);
        transform-origin: 100% center;
      }

      /* Reduce our distance to achieve the shadow effect */
      .translate::before..translate::after {
        transform: translateZ(50px);
      }
    </style>
  </head>
  <body>
    <div class="container preserve">
      <div class="stage preserve">
        <div class="number preserve">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
      </div>
    </div>
  </body>
</html>
Copy the code
  • Determine how many block elements are needed to compose the number
  • usePseudo elementsAnd the color of the element, let the pseudo-element move in our direction, to achieve the shadow effect.
  • useThe transform propertiesTo compute the position of each block element to form a number.

Add digital transformation animation

..number[data-digit="1"] .line:nth-child(1)::before..number[data-digit="1"] .line:nth-child(1)::after..number[data-digit="1"] .line:nth-child(2)::before..number[data-digit="1"] .line:nth-child(2)::after..number[data-digit="1"] .line:nth-child(3)::before..number[data-digit="1"] .line:nth-child(3)::after..number[data-digit="1"] .line:nth-child(4)::before..number[data-digit="1"] .line:nth-child(4)::after..number[data-digit="1"] .line:nth-child(6)::before..number[data-digit="1"] .line:nth-child(6)::after..number[data-digit="2"] .line:nth-child(4)::before..number[data-digit="2"] .line:nth-child(4)::after..number[data-digit="2"] .line:nth-child(7)::before..number[data-digit="2"] .line:nth-child(7)::after..number[data-digit="3"] .line:nth-child(4)::before..number[data-digit="3"] .line:nth-child(4)::after..number[data-digit="3"] .line:nth-child(6)::before..number[data-digit="3"] .line:nth-child(6)::after..number[data-digit="4"] .line:nth-child(1)::before..number[data-digit="4"] .line:nth-child(1)::after..number[data-digit="4"] .line:nth-child(3)::before..number[data-digit="4"] .line:nth-child(3)::after..number[data-digit="4"] .line:nth-child(6)::before..number[data-digit="4"] .line:nth-child(6)::after..number[data-digit="5"] .line:nth-child(5)::before..number[data-digit="5"] .line:nth-child(5)::after..number[data-digit="5"] .line:nth-child(6)::before..number[data-digit="5"] .line:nth-child(6)::after..number[data-digit="6"] .line:nth-child(5)::before..number[data-digit="6"] .line:nth-child(5)::after..number[data-digit="Seven"] .line:nth-child(2)::before..number[data-digit="Seven"] .line:nth-child(2)::after..number[data-digit="Seven"] .line:nth-child(3)::before..number[data-digit="Seven"] .line:nth-child(3)::after..number[data-digit="Seven"] .line:nth-child(4)::before..number[data-digit="Seven"] .line:nth-child(4)::after..number[data-digit="Seven"] .line:nth-child(6)::before..number[data-digit="Seven"] .line:nth-child(6)::after..number[data-digit="9"] .line:nth-child(6)::before..number[data-digit="9"] .line:nth-child(6)::after..number[data-digit="0"] .line:nth-child(2)::before..number[data-digit="0"] .line:nth-child(2)::after {
        transform: translateZ(25px);
        background: #3c4444;
        box-shadow: 0 0 1vw # 425454; }... <script type="text/javascript"> (function () { let numbers = document.getElementsByClassName("number")
        setInterval(() => {
          Array.prototype.slice.call(numbers).forEach((key) => {
            key.setAttribute("data-digit",parseInt(Math.random(*)9));
          });
        }, 1000);
      })()
    </script>
...

Copy the code
  • useThe transition propertiestoLine: : before and line: : afterSet excessive animation.
  • Get the value of the custom property through the CSS property selector. The value of the transform is used to set which blocks need to be changed under different numbers.
  • usejsModify the value of a custom property.

Join time

. .colon{ position: relative; display: inline-block; width: 2vw; height: 12vw; margin: 1vw 2vw 0 0; animation:colonFra 1s linear infinite ; } .colon::before { content: ""; position: absolute; top: 0; left: 0; width: 1vw; height: 1vw; background-color: #34eabc; border-radius: 50%; } .colon::after { content: ""; position: absolute; top: 4vw; left: 0; width: 1vw; height: 1vw; background-color: #34eabc; border-radius: 50%; }. ColonS {left: 1.3 vw; } .colonF{ left: 1vw; } @keyframes colonFra { 0% { opacity: 0; } 100% { opacity: 1; }}...<div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="colon preserve colonS"></div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="colon preserve colonF"></div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>.<script type="text/javascript">
      function time() {
        let timeTem = new Date(a);let a = "0";
        let b = "0";
        if (String(timeTem.getHours()).length > 1) {
          a = String(timeTem.getHours()).substring(0.1);
          b = String(timeTem.getHours()).substring(1.2);
        } else {
          a = "0";
          b = String(timeTem.getHours()).substring(0.1);
        }

        let c = "0";
        let d = "0";
        if (String(timeTem.getMinutes()).length > 1) {
          c = String(timeTem.getMinutes()).substring(0.1);
          d = String(timeTem.getMinutes()).substring(1.2);
        } else {
          c = "0";
          d = String(timeTem.getMinutes()).substring(0.1);
        }

        let e = "0";
        let f = "0";
        if (String(timeTem.getSeconds()).length > 1) {
          e = String(timeTem.getSeconds()).substring(0.1);
          f = String(timeTem.getSeconds()).substring(1.2);
        } else {
          e = "0";
          f = String(timeTem.getSeconds()).substring(0.1);
        }
        return [a, b, c, d, e, f];
      }
      (function () {
        let numbers = document.getElementsByClassName("number")
        setInterval(() = > {
          let arr = time();
          Array.prototype.slice.call(numbers).forEach((key,index) = > {
            key.setAttribute("data-digit",arr[index]);
          });
        }, 1000); }) ()</script>

Copy the code
  • Let’s define the interval of time and seconds.
  • Use js to get the current time and change the value of the custom variable in turn.