Help us understand the problem. What is going on with this article?

CSSでデジタルタイマーを作ってみた。

More than 3 years have passed since last update.

sample1.gif

要素は一つだけ、:before,:afterを使わないで作ってみた。

html

html
<div class="digital-timer"></div>


CSS

css
html,body{
  height: 100%;
}

.digital-timer{
  position: relative;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  margin: 0 0 0 20px;
  width: 10px;
  height: 10px;

  animation: 
    count0 1s 9s forwards,
    count1 1s 8s,
    count2 1s 7s,
    count3 1s 6s,
    count4 1s 5s,
    count5 1s 4s,
    count6 1s 3s,
    count7 1s 2s,
    count8 1s 1s,
    count9 1s 0s;
}

@keyframes count0{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count1{
  0%,100%{
    box-shadow:
       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count2{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,
  }
}

@keyframes count3{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count4{
  0%,100%{
    box-shadow:
       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count5{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count6{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count7{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

      40px  10px 0 0 #000,
      40px  20px 0 0 #000,
      40px  30px 0 0 #000,
      40px  40px 0 0 #000,

      40px  60px 0 0 #000,
      40px  70px 0 0 #000,
      40px  80px 0 0 #000,
      40px  90px 0 0 #000;
  }
}

@keyframes count8{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count9{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

box-shadowを使って数字のドット絵を作っているだけです。

カウントダウンその2

演出をすこし変えてみた。
下記のURLで確認できます。
http://jsfiddle.net/mjohvt7p/2/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away